<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  <input v-model="color">
  <br>
  <table>
    <tr>
      <th>name</th>
      <th>age</th>
      <th>count</th>
    </tr>
    <tr v-for="item in items">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.count }}</td>
    </tr>
  </table>
  <button @click='fetchData'>
    Данные из таблицы
  </button>

</div>

<script>
  const {
    createApp
  } = Vue
  createApp({
    data() {
      return {
        items: [],
        color: "#cccccc"
      }
    },
    methods: {
      fetchData() {
        fetch('https://api.agify.io/?name[]=michael&name[]=matthew&name[]=jane')
          .then(response => response.json())
          .then(data => {
            console.log(data)
            this.items = data
          });
      }
    },
    mounted() {
      console.log(`mounted.`)
      this.fetchData()
    }
  }).mount('#app')
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js