The browser component can not using the Mustache

[honghh2018]

Hi everyone,
there are question when the browser inital the vue3 instance, and then create the component with it
the parent component work well with the Mustache,but the child component, the parent component had the save state active variable.

the code line below:
  var main = {
    components: {
      "gene-table-list":{
           template:`<div>
                  helloworld
                  <span>${state.gene}</span>    //this place trigger error      ----->ReferenceError: state is not defined
           </div>`,
           setup(){
                     const {ref, nextTick, onMounted, getCurrentInstance, reactive, watch} = Vue
                     const state = reactive({
                           gene:"CD79A"
                    })
                     
            return {
               state,
          }
           }
      }
    }
  
      setup() {
            const {
                computed,
                reactive,
                onMounted,
                watch,
                getCurrentInstance,
            } = Vue
            const state =  reactive({
            
            
            })
            return {state}
            
  }

const app = Vue.createApp(main)

    app.config.compilerOptions.delimiters = ['${', '}']
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn, icons: ElementPlusIconsVue})
    const vm = app.mount("#app")
    
    how can i fix this error ?

hope the reply
best,
hanhuihong

[honghh2018]

had anyone hear this ?

[Shyam-Chen]

- template: `
+ template: "

[Justineo]

Use {{ }} instead of ${ }.

[honghh2018]

thanks the reply, but i using the django of python to develop the web, it had the origin interpolate syntax {{}}, so this can not be used in it.