Не скажу, что такой вариант окажется 100% рабочим, но
думаю часть проблемы заключается в этих строках:
this.pieData = await this.$store.dispatch('grade/getGrades');
this.barData = await this.$store.dispatch('grade/getCourses');
store.dispatch вызывает действие, но не возвращает значение. Допустим, в экшене
async getCourses(context) {
context.commit('setCourses', await api.course());
},
вызывается api.course(), который возвращает значение, условно список курсов или курс, как я понимаю.
Затем, значение коммитится в мутацию setCourses.
В мутации setCourses сначала очищается переменная состояния courses, затем создаётся структура Map, содержащая элементы структуры, состоящие из ключа и значения см. setCourses. Так что, думаю, для доступа к переменным состояния, в данном случае courses, следует определить геттеры( getters ).
Условно:
getCourses( state ) {
return state.courses;
}
А в компоненте SecondView.vue использовать такой вариант:
this.barData = await this.$store.getters.getCourses;
Аналогично стоит поступить и с Grades.
Конечно детали реализации будут зависеть от версии Vue.js и vuex.