Vue.js: On-the-fly recompilation after dom changes. How?

Question

Vue.js

Hello. I ask for help, because I myself could not figure it out.
There is a code:

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

<div id="vue">
  
  <ul id="target">
    <li>
      <a href="#" v-on:click.prevent="alert">Alert method (triggered)</a>
    </li>
  </ul>
  
  <a href="#" v-on:click.prevent="appendElem">Append element</a>
</div>

new Vue({
  el: '#vue',
  methods: {
    alert: function (event) {
      alert("Ok, i`m is triggered )");
      return;
    },
    appendElem: function (event) {
      html = '<li><a href="#" v-on:click.prevent="alert">Alert method (not triggered)</a></li>';
      document.getElementById('target').insertAdjacentHTML('beforeEnd', html);

      // вот тут как-то сказать vue, что нужно закомпилить изменения?
      return;
    },
  }
});

https://jsfiddle.net/tscy839e/
I tried to use a separate component, but I don’t know how to bind it to an existing Vue object so that methods from it are pulled up. If there are solutions, please tell me)

Answer 1

You have jquery, brain. If after the first click you need to change the message, then you need to change the message after the first click, something like this:

<div id="vue">
  <div id="target">
    <a href="#" v-on:click.prevent="alert">{{message}}</a>
  </div>
</div>

new Vue({
  el: '#vue',
  data: {
    message: 'alert 1'
  },
  methods: {
    alert: function (event) {
      alert(this.message);
      this.message = 'alert 2';
    }
  }
});

Well, or explain the problem in a normal way. If you need to change a component, then you need to look at https://ru.vuejs.org/v2/guide/components.html#%D0%... or at https://ru.vuejs.org/v2/guide/conditional .html

Answer 2

You're trying to do some bullshit. Make different components and switch them.
If you still feel like recompiling the template, there is Vue.compile .