Router

.

import { createRouter, createWebHistory } from "vue-router";
import dashboard from '../pages/master/dashboard';
import home from '../pages/home';
import profile from '../pages/profile';

const routes = [
    {
        name: 'Dashboard',
        path: '/',
        component: dashboard,
        children: [
            {
                name: 'home',
                path: '/home',
                component: home
            },
            {
                name: 'profile',
                path: '/profile',
                component: profile
            },
        ]
    },
];

const router = Router()
export default router;
function Router() {
    const router = new createRouter({
        history: createWebHistory(),
        routes,
    });
    return router;
}

App

.

<template>

<div>
  <router-view/>
</div>

</template>

<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Component

.

<template>
  <div>
    <h3 class="text-2xl font-bold text-left py-2">Profile Page</h3>
  </div>
</template>
        
    <script>
    
    </script>
        
    <style>
    
    </style>

Axios Fetching

.

axios.get(AlphaVantageApi_URL_LINK.value)
            .then(response => {
                stockMarketHistory = response;
                console.log(stockMarketHistory.data["Monthly Adjusted Time Series"]);
                for (const property in stockMarketHistory.data["Monthly Adjusted Time Series"]) {
                    let closingPrice = stockMarketHistory.data["Monthly Adjusted Time Series"][property]["4. close"];
                    let closingDateMonth = property.split('-')[1];
                    let closingDateYear = property.split('-')[0];
                    let closingDateDay = property.split('-')[2];
                    let closingDateProperlyFormatted = `${closingDateMonth}/${closingDateDay}/${closingDateYear}`;
                    let closingDateEpochTime = Date.parse(closingDateProperlyFormatted)/1000;

                    stockMarketHistoryDates.unshift(closingDateProperlyFormatted);
                    stockMarketHistoryEpochDates.unshift(closingDateEpochTime);
                    stockMarketHistoryPrices.unshift(closingPrice);
                }

Fetching 2

.

<template>

<div class="post" v-for="post in posts" :key="post.id">
  <h2>{{ post.title }}</h2>
  <p>{{ post.body }}</p>
</div>


</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      posts: []
    }
  },
  async mounted () {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3');
    const posts = await res.json();
    this.posts = posts;
  }

  
}
</script>

npm

.

npm init vue

cd …
npm install
npm run dev


or 
vue create .
npm run serve

Babel issue

.

in package.json

    "parserOptions": {
      "parser": "@babel/eslint-parser",
      "requireConfigFile":false
    },