Error when using demo code with vuetify <v-card>

[andrewspy]

I am having problem using v-runtime-template with vuetify, and have make a minimal vuetify demo code as below:

<template>
  <div>
    <v-card>
      <v-card-text>
        <h3>Template code:</h3>
        <code v-html="template"></code>
        <br /><br /><br /><br />
        <h3>
          As you can see, the v-runtime-template component has access to this
          component scope, and updates accordingly.
        </h3>
        <input v-model="name" /> {{ name }}
        <v-runtime-template :template="template" />
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import VRuntimeTemplate from 'v-runtime-template';
import AppMessage from '@/components/AppMessage';

export default {
  data: () => ({
    name: 'Mellow',
    template: `
      <app-message>Hello {{ name }}!</app-message>
    `,
  }),
  components: {
    AppMessage,
    VRuntimeTemplate,
  },
};
</script>

The error given by the console is as follow:

[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Anonymous>
       <VRuntimeTemplate>
         <VCard>
           <Template> at src/views/_Template.vue
             <VContent>
               <VApp>
                 <App> at src/App.vue
                   <Root>

[Vue warn]: Unknown custom element: <app-message> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Anonymous>
       <VRuntimeTemplate>
         <VCard>
           <Template> at src/views/_Template.vue
             <VContent>
               <VApp>
                 <App> at src/App.vue
                   <Root>

If I remove the <v-card> tag, everything will work as expected. I have no clue what is happening and hope if someone can shed some light.

Thanks!

[andrewspy]

Just want to share that I managed to workaround the problem by encapsulating <v-runtime-template> inside another component (which I named it as <v-runtime-shell>), and use <v-runtime-shell> instead.

[andrewspy]

I think for v-card to work, it needs to be registered globally, which is mentioned in https://vuetifyjs.com/en/customization/a-la-carte

Closing the issue. Thanks!

[zsjbsn]

Just want to share that I managed to workaround the problem by encapsulating <v-runtime-template> inside another component (which I named it as <v-runtime-shell>), and use <v-runtime-shell> instead.

@andrewspy I have the same problem by using v-card or v-dialog, can you publish a detail solution. By the way, I have already register vuetify globally.