Как импортировать JSON внутри Vue.js и html

Я новичок в Vue и не привык к HTML

Я пытаюсь импортировать информацию из JSON в свой интерфейс, чтобы представить ее пользователю.

Вот стиль JSON:

[
{
"Title": "SOFT-STARTER", 
"Cod": "Produto: 15775931", 
"Description": "A soft-starter SSW7000 permite o controle de partida/parada e proteção de motores.", 
"Technical_characteristics": ["Corrente nominal", "600 A", "Tensão nominal", "4,16 kV", "Tensão auxiliar", "200-240 V", "Grau de proteção", "IP41", "Certificação", "CE"]
},
{
"Title": "SOFT-STARTER SSW", 
"Cod": "Produto: 14223395", 
"Description": "A soft-starter SSW7000 permite o controle de partida/parada e proteção de motores de indução trifásicos de média tensão.", 
"Technical_characteristics": ["Corrente nominal", "125 A", "Tensão nominal", "6,9 kV", "Tensão auxiliar", "200-240 V", "Grau de proteção", "IP54/NEMA12", "Certificação", "CE"]
}
]

Я видел несколько руководств, но ничего не помогло. Вот статус текущего кода. Этот код даже запускается, но он не приносит никаких данных в «текстовое поле» html. Вот код файла EstepeJson.vue:

<template>
    <div class = "hello">
      <textarea v-model = "listDataString" rows = "20" cols = "80"></textarea>
      <ul id = "items">
        <li v-for = "(item, index) in listData" :key = "index">
          {{ `${item.text} [${item.id}]` }}
        </li>
      </ul>
    </div>
    
  </template>

<script>
import axios from "../components/DadosScrapingProdutos.js";

export default {
  name: "JsonArq",
  props: {
    msg: String,
  },
  data() {
    return {
      listDataString: '',
      listData: [], // placeholder
    };
  },
  mounted() {
    axios
      .get("=== [API_ENDPOINT] == = ")
      .then((response) => {
        this.listDataString = JSON.stringify(response.data, null, "\t");
        this.listData = response.data;
        console.info(this.listDataString);
        return response; // multiline arrow function must return
      });
  },
};
</script>

Код из основного файла Vue, App.vue, выглядит следующим образом:

<template>
  <div class = "main-container">
    <h1 style = "color:#0072c6;">Hello</h1>
    <p style = "text-align:center; color:#0072c6;" >Bem Vindo ao Autocomplete para noticiais <br>
     Team, v-1.0<br>
    <Autocomplete />
    <br>
    <JsonArq />
    <img src = "./components/logo.png" width=250 height=200 alt = "Logo WEG" >
    </p>
  </div>
</template>

<script>
import Autocomplete from './components/Autocomplete.vue'
import JsonArq from './components/EstepeJSON.vue'
export default {
  name: 'App',
  components: {
    Autocomplete, 
    JsonArq
  }
}
</script>

<style>

  .main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Fredoka', sans-serif;
  }

  h1 {
    font-size: 3rem;
  }

  @import url('https://fonts.googleapis.com/css2?family=Fredoka&display=swap');
</style>