title: vue 2.3 AJAX data binding not updating
body: <p>After a successful ajax call the data rendered on the page is not updating. It is remaining empty / null.</p>
  
  <p>It seems that I am missing how to connect the data returned as a front end variable and the dynamically / live rendered html elements.</p>
  
  <p>Here is the relevant code snippets for context. Is it clear from this what is missing / incorrect?</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>page = new Vue({
  
    el: "#container",
  
    data: {
      option_id: null,
      option_name: null
    },
  
    created:function() {
  
      $.ajax({
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        url: 'ajax_methods/get_option',
        success: function (ajax_data) {
  
          self = this;
  
          self.option_id = ajax_data.option_id;        
          self.option_name = ajax_data.option_name;
  
        },
        error: function (e) {
          console.log(e)
        }
      })
  
    }
  })
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="https://unpkg.com/vue@2.3.3"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
  
    &lt;p&gt;{{ option_name }}&lt;/p&gt;
  
      &lt;button v-on:click="send_option()"
        type="button"
        id="left_button"
        name="left_button"
        v-bind:value="option_id"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Checking AJAX success</strong></p>
  
  <p>When entering the following in the console, non null values come back as expected:</p>
  
  <ul>
  <li>self.option_id</li>
  <li>self.option_name</li>
  </ul>