Vuejs установлен крюк в компоненте не работает, как ожидалось

Question

Я использую подключенный хук в компоненте и хочу загрузить диаграмму в виде панели, как вы можете видеть ниже.

Скрипт панели управления

export default {
    name: 'Dashboard',
    mounted() {

        console.log(this.$el); //--> console output -> empty
        const self = this;
        this.$nextTick(function () {
            // some init codes for chart implementation
            console.log(self.$el); //--> console output -> empty also.
        }
    }
}

У меня есть файл App.vue для использования в качестве контейнера. Он имеет структуру шаблона по умолчанию (я имею в виду, что ничего особенного не имеет). Как понять загруженный компонент?

Я думаю; Хук mounted() срабатывает при загрузке App.vue. Но все же компонент DOM панели DOM в настоящее время не создается. Поэтому я решил использовать событие nextTick. Но это также действует как mounted() крючок. Я немного смущен.

Редактировать: эта проблема возникает при нажатии кнопки F5 на клавиатуре.

Редактировать 2: App.vue

<template>
    <section id="app" class="container-fluid">
        <div class="content">
            <router-view />
        </div>
    </section>
</template>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from './views/Dashboard.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Dashboard }
  ]
})

Answer 1

this в функции nextTick не является компонентом Vue.Вы можете попробовать использовать функцию стрелки

this.$nextTick(() => {
    // some init codes for chart implementation
    console.log(this.$el); 
}

или замыкание:

var self = this
this.$nextTick(() => {
    // some init codes for chart implementation
    console.log(self.$el); 
}