In my application, I have components that are toggled between visibility using buttons and variables like v-show="variable." These components function as separate web pages within the app, similar to browsing different pages on a website. What I'm trying to achieve is to trigger a specific action only when a component is displayed on the page. For example, if I need to randomly assign 2 players for a game match and show the game board, I want a message or alert to appear only when player 2 is active in that instance.
function something() { alert("hello"); }
In the script section of the component, I would define the above function and then somehow specify:
when the component is shown -> if (player == 2) { something(); }
However, I am struggling to determine how to handle the "when the component is shown" part effectively. It seems like onMounted, onRendered (which I've heard only works during development), and onActivated could be logical options, but they are not functioning properly or at all in my case.