I have a JSON file and I'm using its content to dynamically render the text inside a box. The content of the box changes when the page is first mounted, and with hover over some buttons, etc. in the page.

The problem is, the text in the JSON can also be dynamic. For example:

.
.
.
"tips": {
    "home": {
        "general": "Welcome to ${testPage}"!,
        "button1": "Click this button to log in."
    }
}
.
.
.

The Vue template is like this (there can also be HTML code in the JSON text, so I use v-html):

<div v-html="tips.home.general"></div>

Also tried like this, didn't work:

<div>{{tips.home.general}}</div>

And the testPage variable is defined like this in the component for now (later, it will be a dynamic value I'll get from the backend):

    data: () => ({
      testPage: 'test demo page name'
    })

Everything works great, except I can't get Vue to read this "testPage" variable as a variable. It just renders the text "${testPage}".

I solved this problem before in JSP by just adding the variable name in JSON like <%= testPage %>, but a similar approach doesn't work here.

Is there a way that it can be done in Vue?