How to update vuejs component data after jquery calls when use turbolinks
<p>I have a vuejs's component that after mounted  should show data fetched from server and use response to update data. When I use turbolinks the vue js don't update the dom.</p>

<p>I tried many different ways to do that, but none worked =(, my last tried was this one:</p>

<pre><code>Vue.component('pf-main-menu', {
  props: [''],
  template: '&lt;pf-menu v-bind:links="links"&gt;&lt;/pf-menu&gt;',
  data: function () {
    return { links: [{text: 'teste'}] }
  },
  mounted: function() {
    this.links = [{text: 'teste 2'}]; &lt;-- This change works

    $.ajax({
      url: '/api/v1/menus/main_menu.json',
    }).success(function(res) {
      this.links = [{text: 'teste 3'}]; &lt;-- This change does not work
    }.bind(this));
  }
});
</code></pre>

<p><a href="https://gist.github.com/victorlcampos/a8c4f05ab53097e4ac07d5bf8306646e" rel="nofollow noreferrer">https://gist.github.com/victorlcampos/a8c4f05ab53097e4ac07d5bf8306646e</a></p>

<p>I already tried this way too:</p>

<pre><code>Vue.component('pf-main-menu', {
  props: [''],
  template: '&lt;pf-menu v-bind:links="links"&gt;&lt;/pf-menu&gt;',
  data: function () {
    return { links: [{text: 'teste'}] }
  },
  mounted: function() {
    this.links = [{text: 'teste 2'}];
    var self = this;

    $.ajax({
      url: '/api/v1/menus/main_menu.json',
    }).success(function(res) {
      self.links = [{text: 'teste 3'}];
    });
  }
});
</code></pre>