Question: How to access *JSON* objects in the **vue.js** app I am new in this 

```
import json from './json/data.json'

```

the JSON file is loaded and now I have to access the objects within it

Answer: 
Just assign the import to a data property

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

```

then loop through the `myJson` property in your template using `v-for`

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

```

**NOTE**

If the object you want to import is static i.e does not change then assigning it to a data property would make no sense as it does not need to be reactive.

Vue converts all the properties in the `data` option to getters/setters for the properties to be reactive. So it would be unnecessary and overhead for vue to setup getters/setters for data which is not going to change. See [Reactivity in depth](https://v2.vuejs.org/v2/guide/reactivity.html).

So you can create a custom option as follows:

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

```

then loop through the custom option in your template using [`$options`](https://v2.vuejs.org/v2/api/#vm-options):

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

```
I have recently started working on a project using Vue JS, JSON Schema. I am trying to access nested JSON Objects from a JSON Schema file in the Vue app. I tried the below code and now I can load different JSON objects inside different Vue template tags.
In the script tag add the below code

```
import  {JsonObject1name, JsonObject2name} from 'your Json file path';

```

Now you can access JsonObject1,2 names in data section of export default part as below:

```
data: () => ({ 

  schema: JsonObject1name,
  schema1: JsonObject2name,   

  model: {} 
}),

```

Now you can load the schema, schema1 data inside Vue template according to your requirement. See below code for example :

```
      <SchemaForm id="unique name representing your Json object1" class="form"  v-model="model" :schema="schema" :components="components">
      </SchemaForm>  

      <SchemaForm id="unique name representing your Json object2" class="form" v-model="model" :schema="schema1" :components="components">
      </SchemaForm>

```

SchemaForm is the local variable name for @formSchema/native library. I have implemented the data of different JSON objects through forms in different CSS tabs.

I hope this answer helps someone. I can help if there are any questions.