vue.js - Some vuetify components such as v-textarea and v-selector no longer showing on page

Question

I have a view to create a new post by a user. I am using and for the text and privacy settings respectively. It was working totally fine initially.

I switched to other modules and kept working on other views for a few days. Now during this time, I don't know what I may have done but when I went to the create new post page again, the fields are just not there. The code is there and the h1 tag and the are the only things that are still being displayed. the v-textarea and v-selector aren't working at all now. I even tried adding these tags on other pages too but they are just not showing on my page. What could I have messed up so badly that I am now facing such a bizarre issue?

The textarea and selector fields are not showing on any page at all now

 <template>
    <div>
        <v-container>
        <h1>Create a new post</h1>
        <v-textarea name="input-7-1" box label="Text" auto-grow 
            v-model="post.text" ></v-textarea>
        <br>
        <v-textarea label="Tags" v-model="tags" v-on:input="tagAdded()"> </v-textarea>
        <br>
        <v-flex xs12 sm6 d-flex>
            <v-select @change="setPrivacy" :items="fetchPrivacyOptions" label="Privacy option"></v-select>
        </v-flex>
        <v-btn @click="submitPost()">Submit</v-btn>
    </v-container> 

I am registering my vuetify components as follows in my main.ts file:

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

标签： vue.jsvue-componentvuetify.js