title: How Can I import json data in Vue Js with axios
body: <p>My JSON Data is like  this which was earlier saved in js file of vue &amp; was accessing it from there 
  I want my html v-for: condition to work as it was working fine earlier
  I tried the method in Docs of Vue js but it couldn't fetch the json data &amp; execute it , plese help if anyone can.</p>
  
  <pre><code>variants: [
              {
                  variantId:501,
                  variantImage: 'assets/images/demo_watch_1.png',
                  variantname: 'alpha',
                  typeslug: 'men',
                  dialname: '26.5x28.5' ,
  
  
                  items: [
                      {
                          itemId: 1,
                          itemimage: 'assets/images/demo_watch_2.png',
                          itemcolour: 'gold'
                      },
                       {
                          itemId: 2,
                          itemimage: 'assets/images/demo_watch_4.png',
                          itemcolour: 'pink',
                      },
                      {
                          itemId:3,
                          itemimage: 'assets/images/demo_watch_1.png',
                          itemcolour: 'black'
                      },
  
                  ]
  
              },
                {
                  variantId:502,
                  variantImage: 'assets/images/demo_watch_2.png',
                  variantname: 'alpha',
                    typeslug: 'women',
                     dialname: '35',
                      items: [
                      {
                          itemId: 1,
                          itemimage: 'assets/images/demo_watch_2.png',
                          itemcolour: 'gold'
                      },
                       {
                          itemId: 2,
                          itemimage: 'assets/images/demo_watch_4.png',
                          itemcolour: 'pink',
                      },
                      {
                          itemId:3,
                          itemimage: 'assets/images/demo_watch_1.png',
                          itemcolour: 'black'
                      },
  
                  ]
              } ],
  </code></pre>
  
  <p>My Vue code is like this </p>
  
  <pre><code>var watchslider = new Vue({
  
      el: '#Products',
  
     data() {
      return {
            Variants: []
      }
    },
       mounted() {
       axios
        .get('./products.json')
        .then(response =&gt; {
            this.Variants = response.data
  
                          }) 
             .catch((e) =&gt; {
        console.error(e)
      })
             } 
  
  });
  </code></pre>
  
  <p>But I am Unable to fetch data from json &amp; execute it  in my html</p>
  
  <pre><code>    &lt;div id="Products" class="responsive py-5"&gt;
  
       &lt;div v-for="(variant,variantIndex) in variants"  :key="variant.variantId" class="col-lg-4 col-4 p-5"&gt;
  
      &lt;p&gt;{{variant.variantImage}}&lt;/p&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>