Vuejs unable to access local json file using axios. 404 (Not Found)

Question

After trying working around it a lot to fetch JSON data from the local file.
Always receiving the following error: GET http://localhost:8080/test.json 404 (Not Found) .
The project has been created using vue-cli.

File has been kept under public folder -

File content is -

{
    "content": "SwiftUI was introduced in iOS 13 in a time many of us have a big app built with UIKit. SwiftUI"
}

Template -

<template>
  <div>
    {{blogcontent.content}}
  </div>
</template>

Script -

<script>
 
import axios from "axios";
const ax = axios.create({
  baseURL: "http://localhost:8080/",
});

export default {
  name: "BloePage",
  data() {
    return {
      blogcontent: { content: "Loading..." },
    };
  },
  mounted() {

    let url = "test.json";
    ax.get(url)
      .then((response) => {
        this.blogcontent = response;
        console.log(response);
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
</script>

Answer 1

I have just edited this part of your code:

this.blogcontent.content = response.data.content;

and it works fine

<template>
  <div>
    {{blogcontent.content}}
  </div>
</template>

<script>
 
import axios from "axios";
const ax = axios.create({
  baseURL: "http://localhost:8080/",
});

export default {
  name: "BloePage",
  data() {
    return {
      blogcontent: { content: "Loading..." },
    };
  },
  mounted() {

    let url = "test.json";
    ax.get(url)
      .then((response) => {
        this.blogcontent.content = response.data.content;
        console.log(response.data.content);
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
</script>