title: Vue.js dynamic data collection for v-for
body: <p>I'm pretty new to Vue.js, trying to get the following to work:</p>
  
  <p>I have several arrays of objects in the root data of the view instance - let's say their names are <code>to do list, shopping list, meetings list</code>.</p>
  
  <p>I also have three buttons with the same names.</p>
  
  <p>If I hardcode <code>&lt;div v-for='items in todolist'&gt;</code>, of course it works, however:</p>
  
  <p>What is the best way to have only one of those <code>div</code>s and dynamically change which array I'm looping through when we click one of the three buttons?</p>
  
  <p>I'm not using ES6, just CDN included.</p>
  
  <p>Basic example (not working) of what I'm trying to do can be found here: 
  <a href="https://jsfiddle.net/eywraw8t/415174/" rel="nofollow noreferrer">https://jsfiddle.net/eywraw8t/415174/</a></p>
  
  <p>There's a list of links that should change the v-for data collection for the list underneath.</p>