component globally

Home.vue

<template>
  <div>
  <p>server status : {{ status }} </p>
  <button @click="changestatus">clickyou</button>
</div>
</template>

<script>
  export default{
    data:function(){
      return{
        status:'critical'
      }
    },
    methods:{
      changestatus(){
        this.status = 'normal';
      }
    }
  }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import Home from './Home.vue';

Vue.component('app-server-status',Home);

//글로벌리 임포트

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <app-server-status></app-server-status>
</template>

<script>

</script>

<style>

</style>