title: Attempting to load a Vue component and populate it with Ajax json content in Laravel
body: <p>I am new to Laravel and a complete noob to Vue. I searched many other Laravel/Vue posts but none seemed to be similar enough to get me to a solution. When attempting to load this component on my view I receive the following error </p>
  
  <blockquote>
    <p>app.js:32654 [Vue warn]: Property or method "features" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.</p>
  </blockquote>
  
  <p>Please let me know what I am missing. 
  <code>chrome.google.com/webstore/detail/vuejs-devtools/</code> shows that Vue is loaded
  I would like to load data from an ajax call to my vue component. that can be updated on the fly by event handler </p>
  
  <p><strong><em>App.js</em></strong></p>
  
  <pre><code>window.Vue = require('vue');
  Vue.component('Example', require('./components/Example.vue'));
  
  const app = new Vue({
      el : '#app',
  
  });
  
  $(document).ready(function() {
      $.ajaxSetup({
          headers : {
              'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
          }
      });
  })
  </code></pre>
  
  <p><strong><em>Example.vue</em></strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container projects-container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8 col-md-offset-2"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;Example Component&lt;/div&gt;
  
                      &lt;div class="panel-body"&gt;
                          &lt;h1&gt;I'm an example component!&lt;/h1&gt;    
                          &lt;ul class="list-group"&gt;
                              &lt;li class="list-group-item" v-for="feature in features"&gt;
                                {{ feature.properties.name }}
                              &lt;/li&gt;
                          &lt;/ul&gt;                    
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      export default {
          mounted() {
              console.log('Component mounted.')
  
          },
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong><em>bladefile</em></strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta name="csrf-token" content="INMA4kLlG32gfhf4Z3BBGIFxitrVCWzzqgqPfooEj"&gt;
  // and yes Vue is loaded 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;
      &lt;example&gt;&lt;/example&gt;
  &lt;/div&gt;
  ...
  
  &lt;script&gt;
  Vue.component('example',{
          template: 'Example',
  
          })  
  
  //returns the JSON listed below
  someOtherObject.addListener('click', function(e) {
  
      $.ajax({
                  url:json,
                  method:'GET',
                  success:function(msg){
                      app.data = JSON.parse(msg);
  
                      }
  
                  })
  })
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong><em>JSON</em></strong></p>
  
  <pre><code>{
     "type":"FeatureCollection",
     "features":[
        {
           "type":"Feature",
           "geometry":{
              "type":"Point",
              "coordinates":[
                 -117.155083,
                 33.569672
              ]
           },
           "properties":{
              "heading":null,
              "face":"South",
              "status":"1",
              "name":"MEADOWLARK ",
              "type":"Single Family Home",
              "client_id":"26",
              "client_name":"Pulte Homes",
              "city_name":"French Valley"
           }
        },
        {
           "type":"Feature",
           "geometry":{
              "type":"Point",
              "coordinates":[
                 -117.151390,
                 33.543981
              ]
           },
           "properties":{
              "heading":null,
              "face":"South",
              "status":"1",
              "name":"Testing Project",
              "type":"Single Family Home",
              "client_id":"83",
              "client_name":"Testing Account",
              "city_name":"Temecula Valley"
           }
        },
        {
           "type":"Feature",
           "geometry":{
              "type":"Point",
              "coordinates":[
                 -117.223720,
                 33.571522
              ]
           },
           "properties":{
              "heading":null,
              "face":"South",
              "status":"1",
              "name":"Oak Ridge",
              "type":"Single Family Home",
              "client_id":"98",
              "client_name":"Woodside 05S LP",
              "city_name":"Beaumont"
           }
        }
     ]
  }
  </code></pre>