Vuetify v-model and v-btn click event

Question

<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <v-card>
        <v-card-title class="headline">TITLE</v-card-title>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" flat nuxt to="/inspire">Continue</v-btn>
        </v-card-actions>
        <v-card-actions>
          <v-spacer />
          <v-btn flat nuxt to="/test">Go To Test</v-btn>
        </v-card-actions>
        <v-text-field>
          <v-textarea v-model="text" />
        </v-text-field>
        <v-card-actions>
          <v-btn @click="gogo">test</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  data: () => ({
    text: 'why does not work?'
  }),
  methods: {
    gogo() {
      this.text = 'Yes! it works!'
    }
  }
}
</script>

when i click the test btn, it does not work. also the text value does not show. How can i fix it?

I build nuxt project with create-nuxt-app. And My node version is v10.15.0