sergrib

Вообще, есть Vue.compile. Правда, постичь всю глубину вашего замысла я, кажется, не в состоянии - модифицировать DOM компонента, получить разметку и использовать её в качестве нового шаблона, wtf? Даже если вам и удастся такое реализовать (честно говоря, понятия не имею, возможно ли это), шаблон и построенная на его основе разметка - не одно и то же. Директив vue в разметке уже нет, так что в случае подобной перекомпиляции поломаются ранее созданные элементы (отвалятся обработчики событий, не будут работать ни условный рендеринг, ни динамическая привязка значений атрибутов - т.е., элементы будут создаваться заново, зафиксированные в том состоянии, которое имели на момент перекомпиляции). Короче, выбросьте эту дурную идею из головы.

Ну а то, что показано в вопросе, реализуется тривиально. Надо только было дочитать документацию до того места, где рассказывается про v-for. Заводим свойство, которое будет указывать, сколько элементов списка надо показать. Хотим добавить новый элемент - делаем свойству +1. Примерно так:

<div id="app">
  <a href="#" @click.prevent="count++">append</a>
  <ul>
    <li v-for="i in count">
      <a href="#" @click.prevent="alert(i)">click me ({{ i }})</a>
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: () => ({
    count: 1,
  }),
  methods: {
    alert: count => alert(Array(count).fill('hello, world!!').join('\n')),
  },
});

У вас jquery, головного мозга. Если после первого клика надо поменять сообщение, то надо именно что поменять сообщение после первого клика, как-то так:

<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';
    }
  }
});

Ну или объясните задачу по нормальному. Если надо поменять компонент, то надо смотреть на https://ru.vuejs.org/v2/guide/components.html#%D0%... или на https://ru.vuejs.org/v2/guide/conditional.html