title: Vue.Js - How to load data into Vue instance from MVC view model?
body: <p>I'm new to Vue Js and would like to use it to filter a few dropdown lists, etc.  Considering I already have all of the data for the dropdowns in a view model I'd like to pass that data to a Vue instance where I can then filter the dropdowns using Vue.</p>
  
  <p>I've tried putting the data into a simple div, so I can select it into the Vue instance, but it doesn't work.  There has to be a better way.  Do I have to make a separate call back to the server just to populate the Vue instance?</p>
  
  <p>The code snippet just has a simple array, which I can't seem to load, either.</p>
  
  <p>Eventually want to pull out of this view model</p>
  
  <p>@model MyApp.CatalogViewModels.ViewModel</p>
  
  <p>script here...</p>
  
  <pre><code>    new Vue({
  
          el: "#app",
          data: {
               categories: ["one", "two"]
          }
          ,
          methods: {
              loadCategories() {
                  $('#modelData.items').forEach(item =&gt; this.categories.push(item))
              }              
  
          },
          created() {
  
              this.loadCategories()
          }
      })
  </code></pre>
  
  <p>Mark up...</p>
  
  <pre><code>&lt;div id="app"&gt;
  
  
  &lt;div id="modelData" items=['apple','orange','pear']&gt;&lt;/div&gt;
  
  &lt;div&gt;
  
     &lt;div&gt;
  &lt;ul&gt;
      &lt;li v-for="item in categories"&gt;
          {{ item }}
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>