this.$router.push is not pushing props as expected

Question

I am trying to navigate from one page to another and pass props to the new page component. This is my router.push:

this.$router.push({
  name: 'settings',
  params: {
    theme: 'dark'
  },
  props: true
})

And the other component looks like this:

export default {
  name: 'settings',
  props: ['theme'],
  mounted() {
    console.log("on mount: " + this.$props.theme)
    console.log(this.$route.params.theme)
  }
}  

Why is theme always undefined? How can I get its value? It is correctly navigating to the page but I am unable to access any props.

Answer 1

This was the easiest solution, using reactive store

// store.js
import { reactive } from 'vue'

export const store = reactive({
  theme: 'light',
})

And then wherever you want to use it:

import { store } from './store/store'

store.theme = 'dark'