Как вставить что то в html код с помощью Vue.JS как в Razor page в ASP.NET MVC?

Мне нужно просто понять механизм, например я в js создам переменную типа Vue.JS, что дальше делать что бы внести значения из этой переменной непосредственно в блок html кода, например в div? Подскажите пожалуйста, а то делаю как в ASP.NET MVC видел и не получается.

Возможно не подключен id, или скобки при создании элементов блока не закрыли, я вам лучше покажу работающий пример, и на нем всё детально опишу.

<div id="app">

Just some text here will appear!


{{h1}}


{{x}}






{{y}}
  • {{z}}
  • {{t}}

    var sample = new Vue({
    el: "#app",
    data: {
    h1: "My example",
    x: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aliquam earum esse explicabo laborum ratione.\n",
    y: "Lorem ipsum dolor sit amet.\n",
    z: "Lorem ipsum dolor sit amet.\n",
    t: "Lorem ipsum dolor sit amet.\n",

    }
    })
    ;

    Вот, это рабочая структура, сначала пройдем по js коду, мы создаем новую переменную, как бы типа Vue.js, в el обязательно нужно задать id элемента в который будут вставляться последующие данные, в примере мы указываем id:”#app”, далее пишем data и в фигурных скобках объявляем всё что должно быть введено в html код, затем в самой html разметке мы проставляем всё переменные которые мы создали для введения в блок внутри 4 фигурных скобок, можете запустить пример и наглядно убедитесь в том что оно работает, кстати, у вас может так же отсутствовать cdn или некорректное подключение. Вот на всякий случай:

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">