v-runtime-template vuejs cannot access root property

This is my page.vue

<template>
   <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
 
export default {
  data: () => ({
    template: `
      <span>{{sample}}</span>
    `
  }),
  components: {
    VRuntimeTemplate
  },
  computed:{
    sample(){ return "sampledata" }
  }
};

My package.json:

"vue": "^2.6.11",
"v-runtime-template": "^1.10.0"

Problem : I got this error on console:

vue.esm.js?a026:628 [Vue warn]: Property or method "sample" 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..

I have read some github issues as like this told me similar problem.

Maybe someone can help me how to resolve this of my simple implementation of using this v-runtime-template library? Many thanks.

#1 Answers

I don't know how this trick can solve my problem, but this really save my life. Original source by H.Eden So, I solve my problem by creating new vue file as v-runtime-template pivot.

RuntimePivot:vue:

<template>
  <v-runtime-template :template="`<div>${template}</div>`"></v-runtime-template>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
export default {
    props:['template','props','listener'],
    components:{
        VRuntimeTemplate
    },
    name:"RuntimePivot",
    data(){
        return {
            myname:'everything'
        }
    },
    
}
</script>

Then I import the runtimePivot.vue template to my Page.vue

<template>
  <div>
    <RuntimePivot :template="template" :props="properties" /> 
  </div>
</template>

<script>
import RuntimePivot from "./RuntimePivot";
export default {
    components:{
        RuntimePivot 
    },
    name:"Page",
    data(){
        return {
            template:`<span>{{key}}</span>`,
            properties:{key:"value"}    
        }
    },
    
}
</script>

Better solution is still opened to you guys.