// ---------------------------
// Header
// ---------------------------
const headerApp = Vue.createApp({});
headerApp.component('header-component', HeaderComponent);
headerApp.mount('#vue-header');

// ---------------------------
// Top Nav
// ---------------------------
const navApp = Vue.createApp({});
navApp.component('top-nav-component', TopNavComponent);
navApp.mount('#vue-topnav');

// ---------------------------
// Category Nav（stage_artists.json を fetch してマウント）
// ---------------------------
fetch('./data/stage_artists.json')
  .then(response => response.json())
  .then(stageData => {
    const categoryApp = Vue.createApp({
      data() {
        return {
          stageArtists: stageData
        };
      }
    });

    // props指定付きでマウント
    categoryApp.component('category-nav', {
      ...CategoryNavComponent,
      props: ['entameData']
    });

    categoryApp.mount('#vue-category');
  })
  .catch(error => {
    console.error('stage_artists.json の読み込みに失敗しました:', error);
  });