Vuetify服务器端渲染

Question

我正在将nuxt与SSR结合使用，并遇到问题： 如何在后端组件中渲染子级？ 问题是该元素仅在我单击父项时出现，

这是我的代码：

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent max-width="310">
      <v-card class="mx-auto" width="300">
        <v-treeview :items="countries" item-text="title" item-children="cities"></v-treeview>
      </v-card>
    </v-dialog>
  </v-row>
</template>
<script>
export default {
  data() {
    return {
      userCity: [],
      dialog: this.$store.getters.initial
    }
  },
  methods: {
    initial(item) {
      this.userCity = item
      this.$store.dispatch('initialAction')
      let userData = {}
      userData.userCity = this.userCity.id
      this.$store.dispatch('userData', userData)
      this.dialog = false
    }
  },
  computed: {
    countries() {
      return this.$store.getters.countries
    }
  }
}
</script>