Estoy asignando una matriz anidada de una response axios.get a state.articles :

 <script setup> import {reactive} from "vue"; const state = reactive({ locale: sessionStorage.locale, articles: [] }) axios.get('/blog-index') .then(res => { const data = res.data for (const [, value] of Object.entries(data)) { state.articles.push([ value['id'], value['heading_' + state.locale], value['descr_' + state.locale], value['content_' + state.locale] ]); } console.log(state.articles[0][0]) }) .catch(err => { console.log(err); console.log(err.response); }); </script>

a partir de esto, console.log(state.articles[0][0]) genera 6 , que es la id correcta.

Sin embargo, cuando quiero representar la id en mi componente:

 <h2>{{ state.articles[0][0] }}</h2>

arroja varios errores:

¿Por qué state.articles[0][0] no está undefined y por qué funciona en el elemento de secuencia de script de mi componente pero no en la template ?

state.articles[0] representa la matriz correcta en la template :

 [ 6, "Newest Article", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ullam velit voluptatem.", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ullam velit voluptatem. Aliquid amet consectetur corporis dignissimos, dolorum earum eligendi error esse eum ipsam modi molestias pariatur quasi qui quis repudiandae sint ullam voluptatum? Animi dolorem molestiae reprehenderit ullam voluptates." ]

¿No debería su elemento 0 ser 6 ?