function is not available on component vue3

This is my app.vue js source code, I upgrade this code vue2 to vue 3 , but now when i try to access a function class from base.vue there is not found function error. how can i solve this ?i using this vue in laravel 11 project, thanks in advance


<template>
<div class="container-test">
<div id="loader-bg" v-show="loading">
<div id="loader">
<img src="/images/result/gif-load.gif" width="120" height="120" alt="Now Loading..." />
<br><span>calculation</span><br><span>please wait some time。</span>
</div>
</div>
<transition name="fade">
<layout-common
:timer="timer"
:show="show"
:storage="storage"
:minutesdata="minutesdata"
:secondsdata="secondsdata"
:questioncategoryDataType="questioncategoryDataType"
@time-up="timeUp"
@trigger-push-result="timeUp">
<router-view
ref="contents"
:rawData="rawData"
:questionnaireData="questionnaireData"
:exampleId="exampleId"
:errored="errored"
:loading="loading"
:sessionData="sessionData"
@data-post="dataPost"
@start-timer="startTimer"
@stop-timer="stopTimer"
@storage-false="storageFalse"
@stopping-timer="stoppingTimer"
@storage-countdown="storageCountdown"
@show-on="showOn"
@show-off="showOff"
@min="min"
@sec="sec"
@question-category="questionCategory">
</router-view>
</layout-common>
</transition>
</div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

export default {
setup() {
const router = useRouter();
const rawData = ref([]);
const sessionData = ref(null);
const questionnaireData = ref([]);
const errored = ref(false);
const loading = ref(true);
const timer = ref(false);
const show = ref(false);
const storage = ref(false);
const secondsdata = ref(0);
const minutesdata = ref(0);
const questioncategoryDataType = ref(null);
const contents = ref(null);
const surveyFlag = ref(null);
const sessionResult = ref(null);
const exampleId = ref(null);

// timeUp function
const timeUp = (timeup) => {
if (contents.value && contents.value.pushResult) {
console.log("Calling pushResult function from app.js");
contents.value.pushResult(timeup); // Correct function call
} else {
console.warn('pushResult not available in contents');
}
};

const fetchData = async () => {
loading.value = true;
try {
const response = await axios.get('/api/v1/test');
rawData.value = response.data.categories;
sessionData.value = response.data.meta.session_id;
questionnaireData.value = response.data.surveys;
localStorage.setItem('raw-data', JSON.stringify(rawData.value));
exampleId.value = response.data.diagnosed;
localStorage.setItem('session-data', JSON.stringify(sessionData.value));
loading.value = false;
} catch (error) {
errored.value = true;
window.alert('問題の取得に失敗しました。' + error);
loading.value = false;
}
};

onMounted(fetchData);

const dataPost = async () => {
loading.value = true;
const sessionId = {
session_id: JSON.parse(localStorage.getItem('session-data'))
};
const sendData = {
meta: sessionId,
categories: JSON.parse(localStorage.getItem('answer-data')),
surveys: JSON.parse(localStorage.getItem('questionnaire-data')),
};

try {
await axios.post('/api/v1/test', sendData);
const surveyResponse = await axios.get('/api/v1/survey');
surveyFlag.value = surveyResponse.data.result;
sessionResult.value = surveyResponse.data.session_id;
localStorage.setItem('survey-flag', JSON.stringify(surveyFlag.value));
localStorage.setItem('session-result', JSON.stringify(sessionResult.value));
errored.value = false;
loading.value = false;
goNext();
} catch (error) {
errored.value = true;
loading.value = false;
goNext();
}
};

const startTimer = () => { timer.value = true; };
const stopTimer = () => { timer.value = false; };
const stoppingTimer = () => { timer.value = false; };
const storageFalse = () => { storage.value = false; };
const storageCountdown = () => { storage.value = true; };
const showOn = () => { show.value = true; };
const showOff = () => { show.value = false; };
const min = (time) => { minutesdata.value = time; };
const sec = (time) => { secondsdata.value = time; };
const questionCategory = (category) => { questioncategoryDataType.value = category; };
const goNext = () => { router.replace({ name: 'result' }); };

return {
rawData,
sessionData,
questionnaireData,
errored,
loading,
timer,
show,
storage,
secondsdata,
minutesdata,
questioncategoryDataType,
contents,
dataPost,
startTimer,
stopTimer,
stoppingTimer,
storageFalse,
storageCountdown,
showOn,
showOff,
min,
sec,
questionCategory,
timeUp,
goNext,
exampleId
};
},
};
</script>


base.vue this is another base.vue name file here,when i timeup app.vue i want to call this function

<template>
<router-view
ref="getData"
:currentTitle="currentData.title"
:currentContent="currentData.content"
:answerLength="currentData.answerLength"
:currentDirection="currentData.attributes.direction"
:correctText="currentData.attributes.popup_correct"
:incorrectText="currentData.attributes.popup_incorrect"
:buttonValue="buttonValue"
opupStatus="popupStatus"
@memorized="memorized"
@answered="answered"
@reset-popup="resetPopup"
@count-timer-question="countTimerQuestion"
@count-timer-answer="countTimerAnswer">
</router-view>
</template>


<script>
export default {
props: {
rawData: Array,
isDemo: Boolean,
questionCategory: String,
},
data: function() {
return {
categoryId: 1,
groupsId: null,
questionId: null,
categoryData: [],
groupsData: [],
currentData: {
id: null,
title: '',
content: [],
choices: [],
type: null,
attributes: {
direction: 0,
popup_correct: '',
popup_incorrect: ''
}
},
buttonValue: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
answerData: [],
start: false,
allMinutes: null,
min: null,
sec: null,
questioncategoryData: null,
question_duration: 0,
answer_duration: 0,
countTimerQuestionData: 0,
countTimerAnswerData: 0,
popupStatus: '',
isRetry: null,
audioElement: {
decision: null,
correct: null,
incorrect: null
},
}
},
created: function() {
this.isRetry = localStorage.getItem('isRetry');
this.isSkip = localStorage.getItem('isSkip');
var answerData = JSON.parse(localStorage.getItem('answer-data'));
var len = answerData.length;
var isData = false;
var index = null;
for (var i = 0; i < len; i++) {
if (answerData && Number(answerData.id) === this.categoryId) {
isData = true;
index = i;
break;
}
}
if (isData) {
this.groupsId = localStorage.getItem('groupsId');
this.questionId = localStorage.getItem('questionId');
if(this.groupsId !== null) {
this.groupsId = Number(this.groupsId);
this.questionId = Number(this.questionId);
}
var answerData = JSON.parse(localStorage.getItem('answer-data'));
this.answerData = answerData[index].questions;
} else {
localStorage.removeItem('groupsId');
localStorage.removeItem('questionId');
}

if(this.rawData.length > 0) {
this.getCategory(this.rawData);
}

var lookIOS = navigator.userAgent.match(/iPad/i)|| navigator.userAgent.match(/iPhone/i);
var loading = lookIOS ? "pagehide" : "beforeunload";
var thisVue = this;
window.addEventListener(loading, function(e) {
thisVue.pushResult();
}, false);

this.soundLoad();
},
mounted: function() {
if(this.isDemo == false){
this.$emit('show-on');
this.$emit('start-timer');
this.$emit('question-category',this.questionCategory);
}

this.pushResult(false);

},
methods: {
getCategory: function(rawData) {
localStorage.setItem('categoryId', String(this.categoryId));

this.allMinutes = Number(rawData[this.categoryId - 1].duration);
this.min = this.allMinutes/1000/60;
this.sec = this.allMinutes/1000%60;
this.$emit('min',this.min);
this.$emit('sec',this.sec);

this.categoryData = rawData[this.categoryId - 1].groups;
if(this.groupsId == null) {
this.groupsId = Number(this.categoryData[0].id);
}
this.getGroups();
},
getGroups: function() {
var len = this.categoryData.length;
var isEnd = true;
for (var i = 0; i < len; i++) {
if(Number(this.categoryData['id']) === this.groupsId) {
localStorage.setItem('groupsId', String(this.groupsId));
if (this.isDemo && this.categoryData.attributes.is_real === 1) {
break;
} else {
isEnd = false;
this.groupsData = [];

var thisQuestions = this.categoryData.questions;
this.groupsData = thisQuestions;
this.setCurrent();
break;
}
}
}
return isEnd;
},
setCurrent: function(next) {
if(this.questionId === null) {
this.questionId = Number(this.groupsData[0].id);
} else if (next) {
this.questionId++;
}
localStorage.setItem('questionId', String(this.questionId));

var isEnd = true;
var len = this.groupsData.length;
for (var i = 0; i < len; i++) {
if (Number(this.groupsData['id']) === this.questionId) {
var isEnd = false;
this.currentData = this.groupsData;

if(Number(this.currentData.type) === 1) {
var brIndex = this.currentData.title.indexOf('<br>');
if(brIndex === -1) {
this.currentData.title = this.currentData.title.replace(/。/,"$&<br>");
}
if(this.isDemo) {
this.$router.replace({name: 'number-memory-demo-memorize'});
} else {
this.$router.replace({name: 'number-memory-memorize'});
}
} else if (Number(this.currentData.type) === 3) {
var brIndex = this.currentData.title.indexOf('<br>');
if(brIndex === -1) {
this.currentData.title = this.currentData.title.replace(/test/, "$&<span>");
this.currentData.title = this.currentData.title.replace(/left toright/g,"<span class='left'>$&</span>").replace(/右から順に/g,"<span class='right'>$&</span>").replace(/。/,"$&</span><br>");
}
if(this.isDemo) {
var popupBrIndex = this.currentData.attributes.popup_incorrect.indexOf('<br>');
if(popupBrIndex === -1) {
this.currentData.attributes.popup_incorrect = this.currentData.attributes.popup_incorrect.replace(/test、/,"<span>$&</span><span>")

this.currentData.attributes.popup_incorrect = this.currentData.attributes.popup_incorrect.replace(/。/,"$&</span><br>").replace(/「/,"<br>$&");
}
}

this.currentData.answerLength = this.currentData.choices.length;

if(this.isDemo) {
this.$router.replace({name: 'number-memory-demo-answer'});
} else {
this.$router.replace({name: 'number-memory-answer'});
}
}
break;
}
}
return isEnd;
},
memorized: function(data) {
if(this.isSkip == 0){
try{
this.audioElement.decision.pause();
this.audioElement.decision.currentTime = 0;
this.audioElement.decision.play();
} catch( e ) { }
}
this.question_duration = this.countTimerQuestionData * 1000;

if(this.isDemo && this.isRetry === '1') {
var len = this.answerData.length;
for(var i = 0; i < len; i++) {
if (this.answerData && Number(this.answerData['id']) === this.questionId) {
this.answerData["duration"] += this.question_duration;
break;
}
}
} else {
var thisAnswerData = {
'id': String(this.currentData.id),
"answer": null,
'duration': this.question_duration
}
console.log(thisAnswerData);
this.answerData.push(thisAnswerData);
}
this.setCurrent(true);
},
answered: function(data) {
if (this.isDemo && this.isSkip != 1 && this.popupStatus !== 'correct') {
var len = this.currentData.choices.length;
var isCorrect = true;
for (var i = 0; i < len; i++) {
if(this.currentData.choices !== data) {
isCorrect = false;
break;
}
}
if (isCorrect) {
try{
this.audioElement.correct.pause();
this.audioElement.correct.currentTime = 0;
this.audioElement.correct.play();
} catch( e ) { }
this.popupStatus = 'correct';
} else {
try{
this.audioElement.incorrect.pause();
this.audioElement.incorrect.currentTime = 0;
this.audioElement.incorrect.play();
} catch( e ) { }
this.popupStatus = 'incorrect';
}
} else {
if(this.isSkip == 0){
try{
this.audioElement.decision.pause();
this.audioElement.decision.currentTime = 0;
this.audioElement.decision.play();
} catch( e ) { }
}
this.answer_duration = this.countTimerAnswerData * 1000;

if(this.isDemo) {
if(this.isRetry === '1') {
var len = this.answerData.length;
for(var i = 0; i < len; i++) {
if (this.answerData && Number(this.answerData['id']) === this.questionId) {
this.answerData["duration"] += this.answer_duration;
break;
}
}
} else {
var thisAnswerData = {
"id": String(this.currentData.id),
"answer": null,
"duration": this.answer_duration
}
console.log(thisAnswerData);
this.answerData.push(thisAnswerData);
}
this.resetPopup();
} else {
var thisAnswerData = {
"id": String(this.currentData.id),
"answer": data.concat(),
"duration": this.answer_duration
}
console.log(thisAnswerData);
this.answerData.push(thisAnswerData);
}
this.questionId++;

var isQuestionsEnd = this.setCurrent();
if (isQuestionsEnd) {
this.questionId = null;
this.groupsId++;
var isGroupsEnd = this.getGroups();
if (isGroupsEnd) {
var answerData = JSON.parse(localStorage.getItem('answer-data'));
var len = answerData.length;
for (var i = 0; i < len; i++) {
if (answerData && Number(answerData.id) === this.categoryId) {
answerData.questions = this.answerData;
break;
}
}
localStorage.setItem('answer-data', JSON.stringify(answerData));
if(this.isDemo) {
this.$router.replace({name: 'number-memory-ready'});
} else {
localStorage.removeItem('groupsId');
localStorage.removeItem('questionId');
this.$router.replace({name: 'number-memory-end'});
}
}
}
}
},
countTimerQuestion: function(time){
this.countTimerQuestionData = time;
},
countTimerAnswer: function(time){
this.countTimerAnswerData = time;
},

pushResult(timeup) {
console.log("Push result triggered with timeup:", timeup);

var answerData = JSON.parse(localStorage.getItem('answer-data'));
console.log("Existing answer-data in localStorage:", answerData);

var duration;
if (Number(this.currentData.type) === 1) {
duration = this.countTimerQuestionData * 1000;
} else {
duration = this.countTimerAnswerData * 1000;
}

var thisAnswerData = {
id: String(this.currentData.id),
answer: null,
duration: duration,
};

console.log("Data to be pushed: ", thisAnswerData);
this.answerData.push(thisAnswerData);
console.log("Updated answerData array: ", this.answerData);

this.$emit('trigger-push-result', timeup);
},


resetPopup: function() {
if(this.isSkip == 0){
try{
this.audioElement.decision.pause();
this.audioElement.decision.currentTime = 0;
this.audioElement.decision.play();
} catch( e ) { }
}
this.popupStatus = '';
},
soundLoad: function() {
this.audioElement.decision = new Audio('../../../sound/decision.mp3?v=20220227');
this.audioElement.correct = new Audio('../../../sound/correct.mp3?v=20220227');
this.audioElement.incorrect = new Audio('../../../sound/incorrect.mp3?v=20220227');
},
},
watch: {
rawData: function(rawData) {
this.getCategory(rawData);
}
}
}
</script>


I try to post data direactly from base.vue that is also no possible

Continue reading...