title: Populate Vue data object, and console log results
body: <p>I have a huge list of data in a Vue component that I would like to dynamically populate. I'm trying to do that by a loop, and a global variable. It looks like below:</p>
  
  <pre><code>    var filterItems = document.querySelectorAll('.filter-title');
      var filterItemsTitle = filterItems.innerHTML;
      var arr = [];
  
      function buildContent() {
        for (var i = 0; i &lt; filterItems.length; i++) {
          arr.push(filterItems[i].innerHTML);
        }
        console.log(arr)
      }
  
      window.onload = buildContent
  
      var titleFilter = new Vue({
        // in items its refering to arr built in buildContent
        el: '#filter',
        data: {
           // arr comes from buildContent() - I think...does this work?
           items: arr,
           filters: [
              { label: 'All Titles', value: false },
              { label: 'a', value: 'a' },
              { label: 'b', value: 'b' },
              { label: 'c', value: 'c' },
          ],
          currentFilter: false,
        },
        methods: {
          filterItems: function(e){
            console.log(items)
          }
        }
      });
  </code></pre>
  
  <p>Basically what I want to do is take the <code>arr</code> variable which is populated with an array of content in the <code>buildContent()</code> loop and reference it in the items data section of my vue component</p>
  
  <ol>
  <li>is this possible? Or no?</li>
  <li>How can I <code>console.log()</code> the <code>items</code> object? When I try to do it it is undefined</li>
  </ol>