vue Router 설계 관련 궁금

BookMarkList.vue

<template>
    <div class="BookMarkList">
        <GigListByChunk
            :gigs="chunkList(bookmarks)"
            :chunk-count="chunkCount"
        />
    </div>
</template>

<script>
    import GigListByChunk from '../../shared/GigListByChunk.vue';
    import { getBookMarkList } from '../../../../js/api/babel/bookmark.js';
    import _ from 'underscore';

  export default {
    name: 'BookMarkList',
    components: {
      GigListByChunk,
    },
    data() {
      return {
        bookmarks: [],
        categoryId: Number(this.$route.params.id) || 0
      };
    },
    props: {
      chunkCount: {
        type: Number,
        default: 4,
      },
    },
    computed: {
      categoryID() {
        return Number(this.$route.params.id) || 0;
      },
    },
    methods: {
      async fetchBookMarkItem(id) {
        try {
          console.log('id', id);
          const { data: { gigs }} = await getBookMarkList(id);
          this.bookmarks = gigs;
        }
        catch(e) {
          console.log(e);
        }
      },
      chunkList(curatedContent = [], chunkCount = this.chunkCount) {
        return _.chunk(curatedContent, chunkCount);
      },
    },
    created() {
      console.log('this.$route', this.$route.params.id);
      this.fetchBookMarkItem(this.$route.params.id);
    },
    updated() {
      console.log('updated')
    }
  }

</script>

<style lang="scss">
    .GigLists {
        .flex-gig {
            flex-basis: calc(25% - 15px);
            margin-bottom: 40px;
        }
    }

</style>

MyBookMarks.vue

<template>
   <MainWrapper>
      <div class="container">
         <div class="row margin-top-40">
<!--            todo Component 분리 -->
            <div class="col-xs-12">
               <h2><b>찜한 서비스</b></h2>
            </div>
         </div>
         <!--            todo Component 분리 -->
         <div class="row margin-top-35">
            <div class="col-xs-2">
               <SideCategoryList
                    :sideCategoryList="sideCategoryList"
                    :portfolioTotalCount="portfolioBookmarksCount"
               />
            </div>
            <div class="col-xs-10">
                <!--BookMarkList and PortfolioList -->
                <router-view/>
            </div>
         </div>
      </div>
   </MainWrapper>
</template>

<script>
  import { mapActions, mapState } from 'vuex';
  import { getBookMarkCountList } from '../../../api/babel/bookmark.js';
  import MainWrapper from '../../shared/MainWrapper.vue';
  import SideCategoryList from '../../shared/SideCategoryList.vue';

  export default {
    name: 'MyBookMarks',
    components: {
      MainWrapper,
      SideCategoryList
    },
    props: [],
    data() {
      return {
         bookmarks: [],
         sideCategoryList: [],
      };
    },
    computed: {
       ...mapState('common', [
         'portfolioBookmarksCount'
       ])
    },
    methods: {
       async fetchBookMarkCategoryList() {
          try {
            const { data: { categories }} = await getBookMarkCountList();
             this.sideCategoryList = categories;
          } catch(e) {
            console.log(e);
          }
       },
      ...mapActions('common/', [
        'setNavBarCategoryListAction'
      ]),
    },
    created() {
      // fix navCategory
       this.setNavBarCategoryListAction('category');
       // getCategoryCount
       this.fetchBookMarkCategoryList();
    }
  };
</script>

router.js

      {
        path: 'my_bookmarks',
        name: 'MyBookMarks',
        component: MyBookMarks,
        children: [
          {
            path: '/',
            redirect: 'category/all'
          },
          {
            path: 'category/:id',
            name: 'BookMarkList',
            component: BookMarkList,
          },
          {
            path: 'portfolio',
            name: 'PortfolioList',
            component: PortfolioList,
          },
        ],
      },

SideCategoryList.vue

<template>
    <div class="row">
        <div class="col-xs-12">
            <ul class="margin-none list-unstyled">
                <li class="category-list-item root-category inline-block cursor active">
                    <img class="width-20px position-relative" src="/img/category/ic-arrow-right.png" style="top: -2px;" />
                    <router-link
                        class="plain"
                        to="/my_bookmarks/category/"
                        @click="updateCategoryId"
                    >
                        전체카테고리({{ getTotalBookMarkCount }})
                    </router-link>
                </li>
            </ul>
            <ul class="margin-none list-unstyled">
                <li v-for="categoryItem in sideCategoryList"
                    :key="categoryItem.id"
                >
<!--                    <router-link-->
<!--                       class="plain font-color-light"-->
<!--                       :to="getCategoryBookMarkLink(categoryItem)"-->
<!--                       @click="updateCategoryId(categoryItem.id)"-->
<!--                    >-->
<!--                        {{ getCategoryItemLabel(categoryItem) }}-->
<!--                    </router-link>-->
                    <a
                        class="plain font-color-light"
                        @click="updateCategoryId(categoryItem.id)"
                    >
                        {{ getCategoryItemLabel(categoryItem) }}
                    </a>
                </li>
             </ul>
         </div>
        <div class="row margin-top-10">
            <div class="col-xs-12">
                <ul class="margin-none list-unstyled">
                    <li class="category-list-item root-category inline-block cursor  ">
                        <img class="width-20px position-relative" src="/img/category/ic-arrow-right.png" style="top: -2px;">
                        <router-link to="my_bookmarks/portfolio">
                            포트폴리오 ({{ portfolioTotalCount }})
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
  import { mapActions } from 'vuex';
  export default {
    name: 'SideCategoryList',
    components: {
    },
    props: {
      sideCategoryList: {
        type: Array,
        default: () => []
      },
      portfolioTotalCount: {
        type: Number,
        default: 0,
      }
    },
    computed: {
      getTotalBookMarkCount() {
        if (this.sideCategoryList.length) {
          return this.sideCategoryList.reduce((acc, crr) => {
            acc += crr.count;
            return acc;
          }, 0);
        } else {
          return 0;
        }
      },

    },
    methods: {
      ...mapActions('common/', [
        'updateBookMarkCategoryIdAction'
      ]),
      getCategoryItemLabel(categoryItem) {
        return `${categoryItem.name} (${categoryItem.count})`;
      },
      getCategoryBookMarkLink(categoryItem) {
        return `/my_bookmarks/category/${categoryItem.id}`;
      },
      updateCategoryId(id = 0) {
        console.log('id', id);
        this.updateBookMarkCategoryIdAction(id);
      }
    },
  };

</script>

<style lang="scss">
    .GigLists {
        .flex-gig {
            flex-basis: calc(25% - 15px);
            margin-bottom: 40px;
        }
    }

</style>

라우터
mybookMarks page 는 자식 컴포넌트로
왼쪽 메뉴 - SideCategoryList.vue
오른쪽 카드를 뿌려줄(포트폴리오냐 카테고리냐에 따라서)BookMarkList.vue PortfolioList.vue router-view로 이루어져 있습니다.

  path: 'my_bookmarks',
        name: 'MyBookMarks',
        component: MyBookMarks,
        children: [
          {
            path: '/',
            redirect: 'category/all'
          },
          {
            path: 'category/:id',
            name: 'BookMarkList',
            component: BookMarkList,
          },
          {
            path: 'portfolio',
            name: 'PortfolioList',
            component: PortfolioList,
          },
        ],
//API 
 getBookMarkCountList   -  sideMenuList   [
                                                 {id: 1 name: 디자인, count: 2},
                                                {id: 6 name: IT.프로그래밍, count: 1} ....
]
 getBookMarkList   -  bookMarkList [{
// card 그릴때 필요한 객체 
      { ...card1 },
            { ...card2},
}]

이슈: 왼쪽메뉴는 한 번 호출하고 보통 변하지 않아서 메뉴를 클릭할때 id값만 받아서 오른쪽만 SPA처럼 그려주고 싶은데 
(근데 지금 생각해보니 오른쪽도 카운트 update가 실시간으로 되는 경우가 ... 이건 나중에 다시 생각해봐야 겠네요)
 SideCategoryList가 router-link로 뿌려줘서 dynamic 매칭을 하면 오른쪽 북마크리스트 api 호출을 해서 그릴 줄 알았는데 
param이 바뀐 부분을 컴포넌트가 인지를 못해서 호출을 안 하고 있는 부분이 이슈입니다.  
이 때문에 router 공식문서에 $route watch api를 살펴봤는데 약간 결이 다른 느낌이여서 정리해서 질문드려요 

생각해보니 router-link대신에 -> dispatch or MapAction으로 -> api call 하고 -> bookMarkList -> update 시켜주면 ....

https://github.com/jeonghwan-kim/vue-router-sample/blob/master/src/components/Post.vue
watch {
$route: 를 watch할 수 있다 !!!
}