How to use Axios in Vue to set page meta (title,description,og) in vue-router or in component

My vue-router

const routes = [
  {
    path: '/',
    component: App,
    meta: {
      title: 'Home Page - Example App',
      metaTags: [
        {
          name: 'description',
          content: 'The home page of our example app.'
        },
        {
          property: 'og:image',
          content: ''
        }
      ]
    }
  },
  {
    path: '/about',
    // I'm kind of cheating by reusing the main app component here.
    component: App,
    meta: {
      title: 'About Page - Example App',
      metaTags: [
        {
          name: 'description',
          content: 'The about page of our example app.'
        },
        {
          property: 'og:image',
          content: ''
        }
      ]
    }
    ...

My Json

{
  "home": {
    "title": "Home Page Title",
    "description": "Home Page Desc",
    "og-image": ""
  },
  "about": {
    "title": "About",
    "description": "About Page Desc",
    "og-image": ""
  },
  ...
}

1. How to set title using my json file hosted same vue in public directory (public/json/meta.json)?
2. Which one good method to set meta, vue-router or component?

I am newbie in vue.js so please tell me detailed way so i can understand easily clear steps.