nested children router-view still calls created multiple times

Scenario: I have a parent component in which there's a router view. This parent has 2 children components, so when I go to one of the children's component, parent's created hook shouldn't be called.

Problem: When I go to child 1 component, parent's created hook still gets called. same happens when I go to child 2 component. Why is that? Code seems so easy.

I Appreciate it.

Parent Component:

<script>
  export default {
    name: "Parent",
    created() {
      console.log("this should NOT appear on route change i.e. parent component should be rendered only once?!");
    }
  }

<template>
  <div>
    <h1>PARENT</h1>
    <hr>
    <RouterLink to="/routetest/23/profile">FIRST CHILD</RouterLink>
    <br>
    <br>
    <RouterLink to="/routetest/23/posts">SECOND CHILD</RouterLink>
    <hr>
    <RouterView />
  </div>
</template>

/routetest/23/profile component

<template>
  <div>
    <h1> CH1</h1>
  </div>
</template>
</script>

/routetest/23/posts component

<template>
  <div>
    <h1> CH2</h1>
  </div>
</template>

Routes:

{
        path: '/routetest/:id',
        component: testparent,
        children: [{
            path: 'profile',
            meta: {
              authRequired: false,
              rule: 'isAll',
            },
            component: test1
          },
          {
            path: 'posts',
            meta: {
              authRequired: false,
              rule: 'isAll',
            },
            component: test2
          }
        ]
      }