How to output an array of data, Vue.js?

Question

Vue.js

There is such a problem, I'm fumbling for several days and I can not solve it. There is a database on firebase, I make a GET request to it using axios, I pull data from a .json file, convert it and write it to an array - assigning a unique id to each entry. Task: you need to display, at the click of a button in a cycle, or how - transfer data to a table, or a list, or ordinary p-tags. Now I can only display a certain line by setting an id for it.
Axios GET request:

fetchData () {
  axios.get('https://db-http.firebaseio.com/devices.json')

 .then(res => {
      console.log(res)
      const data = res.data
      const devices = []
      for (let key in data) {
        const device = data[key]
        device.id = key
        devices.push(device)
      }
      console.log(devices)
      this.named = devices.named
      this.napruga = devices.napruga
      this.location = devices.location
    })
    .catch(error => console.log(error))
}

Here's how I'm trying to display in tags:

<form @submit.prevent="fetchData">

      <p >Name:{{named}}-Location:{{location}}-Napruga:{{napruga}}</p>
      <ul v-if="devices && devices.length">
        <li v-for="device of devices" :key="device.id">
          <p>{{device.named}}</p>
          <p>{{device.location}}</p>
          <p>{{device.napruga}}</p>
        </li>
      </ul>

      <div class="submit">
      <button type="submit">Submit</button>
      </div>
    </form>

Here is how it turns out to output, but only one line given with an index:

fetchData () {
  axios.get('https://db-http.firebaseio.com/devices.json')

 .then(res => {
      console.log(res)
      const data = res.data
      const devices = []
      for (let key in data) {
        const device = data[key]
        device.id = key
        devices.push(device)
      }
      console.log(devices)
      this.named = devices[1].named
      this.location = devices[1].location
      this.napruga = devices[1].napruga
    })
    .catch(error => console.log(error))
}
}

Here are the results with screenshots + how the data is transferred to the console and the array: you need to make sure that all the data that is transferred is displayed line by line, and not just one line at a given index.

Answer 1

So, what's the problem, then? You already have everything - when processing the response, you collect the devices array, in the template you output the devices array. You just need to throw devices from response processing into data - instead of the nonsense that you have now (separate properties of one element).
UPD. Taken from the comments:

A little misunderstood, can you demonstrate how to set it?

In the component's data, define the devices array:

data: () => ({
  devices: [],
}),

Upon receipt of a response, throw the received data into devices:

this.devices = Object.entries(res.data).map(([ id, n ]) => ({ ...n, id }));

Well, take them out:

<ul>
  <li v-for="d in devices" :key="d.id">
    ...

Answer 2

I think they work differently with firebase, don't they? Connect it to the project, for example, and use native methods for obtaining data so that everything works in real time

Answer 3

The method fetchDatamust return a Promise.

fetchData () {
  return ...
}

Put a return - otherwise server rendering will fail.