How to re-render in Vue after the template is loaded in a component?

Question

Vue.js

There is this markup:

<script src="/assets/js/vue/vue.js" type="text/javascript"></script>
    <script src="/assets/js/vue/vue-router.js" type="text/javascript"></script>
    <script src="/assets/js/vue/axios.js" type="text/javascript"></script>
    <script src="/assets/js/page/auth.js" type="text/javascript"></script>

<div id="appAuth">
          <router-view></router-view>

          <div class="bottom-wrapper" v-bind:class="{ hidden: stay=='restore' }">
                  <router-link to="/restore">восстановить пароль</router-link>.
          </div>

          <div class="bottom-wrapper" v-bind:class="{ hidden: stay=='auth' }">
                    <router-link to="/auth">авторизация</router-link>.
            </div>

        </div>

and this script:

const auth = {
  props: ['name'],
  template: '<div v-html="html_block"></div>',
  data: function () {
    return {
        html_block: null
      }
  },
  created () {
    // запрашиваем данные когда реактивное представление уже создано
    this.fetchData();
  },
  watch: {
    // в случае изменения маршрута запрашиваем данные вновь
    '$route': 'fetchData',
  },
  methods: {
    fetchData () {

      axios.get('/auth.php?do='+this.name).then( (response) => {
            this.html_block = response.data.html;
            app.stay = this.name;
        });

    },

  }
};

const routes = 	[
  { path: '*', component: auth, props: { name: 'auth' } },
  { path: '/auth', component: auth, props: { name: 'auth' } },
  { path: '/restore', component: auth, props: { name: 'restore' } }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

const app = new Vue({
  delimiters: ['<%', '%>'],
  data: function () {
    return {
      stay: "auth"
    }
  },
  methods: {

  },
  router
}).$mount('#appAuth');

I'm trying to figure out with vue.js and first I'm trying to make a page on which there is an authorization form at the start, under it is a link to reset the password. I upload password recovery and authorization forms via axios. The problem I encountered: when loading these forms, I cannot hang v-on:submit events on them. Initially, the bottom-wrapper blocks were also in these loaded forms, but link clicks and routing did not work.
app .$forceUpdate() after forms loaded didn't work for me. What am I doing wrong?

Answer 1

Вот тут: https://ru.vuejs.org/v2/api/#v-html
Т.е. ваш вариант не будет работать.