<div id="app">
  {{ info }}
</div>

<h1 id="title">{{ title }}</h1>
<ul id="sake">
    <li v-for="(value,index) in sake">
    {{ index +1 }}月は{{ value }}酒が飲めるぞ
  </li>
</ul>
//jsonファイルURL
var dmain = 'dl.dropboxusercontent.com';
var directory = 's/kuviirbaq4yl11p';
var file = 'sake';
var url = 'https://' + dmain + '/' + directory + '/' + file + '.json';

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get(url)
      .then(response => (this.info = response))
  }
})

var title = new Vue({
  el: '#title',
  data: {
    title: '日本全国酒飲み音頭'
  }
})

var sake = new Vue({
  el: '#sake',
  data: {
    sake: [
      "正月で",
      "豆まきで",
      "ひな祭りで",
      "花見で",
      "子供の日で",
      "田植えで",
      "七夕で",
      "暑いから",
      "台風で",
      "運動会で",
      "何でもないけど",
      "ドサクサで",
    ]
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js