Store a get in an object and bide from it. Vue.js

Question

I have a working GET method (I am not using Axios) and I would like to save its result in an object (this result can be varied, because this GET returns an object with several other objects. I tried something like:

would like to do something like this in html (separate products by categories):

<b-button 
  class="buttons" 
  variant="primary"
  @click="criaTable(Categoria)"
  v-for="Categoria in produtos.categorias" :key="Categoria" 
>
  {{ Categoria }}
</b-button>

and in the script:

data() {
  return {
    loading: true,
    produtos: [],
  }
},

 mounted() {
  this.getCardapio();
},

methods: {
  getCardapio() {
    const service = new CardapioService();
    service.getCardapio()
    .then(response => response.data)
      .then(data => {
        this.produtos = data;
        return data.data;
      })
       .then(() => this.loading = false)
  }
}

an example of this get return:

 {
   success: true
   data: [
    0: {
      _id: ...........
      name: Produto X
      price: 10
      image: url
      category: categoria 1
      description: .....
      user: .....
    }
    1: {...}
    2: {...}
    .
    .
    .
    n: {...}
   ]
 }

Thanks for the patience of reading everything!

Answer 1

My solution was:

    created() {      
      const service = new CardapioService();
      service.getCardapio()
        .then((data) => {
          this.produtos = data.message; 
          console.log(this.produtos);
          this.loading = false;
    })
},

I only stored the return message for but could have stored the entire body, or just the parameters I wanted, for example: this.products = date;

To make Binding you only need a v-for iterating over the object => v-for="produto in produtos"