Simplemente asigne la importación a una propiedad de datos

 <script> import json from './json/data.json' export default{ data(){ return{ myJson: json } } } </script>

luego recorra la propiedad myJson en su plantilla usando v-for

 <template> <div> <div v-for="data in myJson">{{data}}</div> </div> </template>

NOTA

Si el objeto que desea importar es estático, es decir, no cambia, no tendría sentido asignarlo a una propiedad de datos, ya que no es necesario que sea reactivo.

Vue convierte todas las propiedades en la opción de data en getters/setters para que las propiedades sean reactivas. Por lo tanto, sería innecesario y costoso para vue configurar getters/setters para datos que no van a cambiar. Ver Reactividad en profundidad .

Entonces puede crear una opción personalizada de la siguiente manera:

 <script> import MY_JSON from './json/data.json' export default{ //custom option named myJson myJson: MY_JSON } </script>

luego recorra la opción personalizada en su plantilla usando $options :

 <template> <div> <div v-for="data in $options.myJson">{{data}}</div> </div> </template>

Si su archivo se ve así:

 [ { "firstname": "toto", "lastname": "titi" }, { "firstname": "toto2", "lastname": "titi2" }, ]

Tu puedes hacer:

 import json from './json/data.json'; // .... json.forEach(x => { console.log(x.firstname, x.lastname); });

Los proyectos de mecanografiado (tengo mecanografiado en componentes SFC vue), necesitan establecer la opción del compilador resolveJsonModule en true .

En tsconfig.json:

 { "compilerOptions": { ... "resolveJsonModule": true, ... }, ... }

Feliz codificación :)

(Fuente https://www.typescriptlang.org/docs/handbook/compiler-options.html )