Vue data output from google spreadsheet, how to get to the right data?

Question

Vue.js

Hello, I want to get the name of the goods and prices (old and new price) from Google tables.
The plate looks like this.

Here is the Json of the plate

https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json

Here is the VUE request

new Vue({
  el: '#test',
  data() {
    return {
      info: null
    };
  },
  mounted() {
    axios
      .get('https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json')
      .then(response => (this.info = response));
  }
});

And HTML markup

<div class="" id="test">
   <div v-for="item in info">
     {{ item.title }}
   </div>
</div>

I understand that the request is blunt, but what exactly is it.

If you make a variable just {{ info }}

<div class="" id="test">
  {{ info }}
</div>

then the data arrives with json

Answer 1

data: () => ({
  info: null,
  columns: [
    { title:     'title', key:        'title' },
    { title: 'old price', key: 'gsx$oldprice' },
    { title: 'new price', key: 'gsx$newprice' },
  ],
}),
mounted() {
  axios
    .get('https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json')
    .then(r => this.info = r.data.feed.entry);
},

<table>
  <thead>
    <tr>
      <th v-for="col in columns">{{ col.title }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in info">
      <td v-for="col in columns">{{ item[col.key].$t }}</td>
    </tr>
  </tbody>
</table>

Answer 2

axios
.get('https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json')
.then(response => {
    this.info = response.data.feed.entry
});

<div v-for="item in info">
     {{ item.title['$t'] }}
   </div>