Ref of parent component does not trigger update of one child when changed in another child (Android Chrome)

[dasdawidt]

Hi! I'm currently working on a PWA project using Vue 3/Vite/Vue Router. I ran into a weird issue using a layout component:

I use a component called DefaultLayout for the basic layout of my page.
It has several slots, like action-left, action-right, title and default:

<!-- layouts/DefaultLayout.vue -->
<template>
  <!-- styling discarded here -->
  <slot name="action-left" />
  <slot name="title" />
  <slot name="action-right" />
  <slot />
</template>

Now in one view, I use DefaultLayout and put an input inside the default slot and a submit button inside action-right:

<!-- views/ExampleView.vue -->
<script setup lang="ts">
import { ref } from 'vue';
import DefaultLayout from '@/layouts/DefaultLayout.vue';

const input = ref('');
</script>

<template>
  <DefaultLayout>

    <template #action-right>
      <button :disabled="input.length === 0">
        Submit
      </button>
    </template>

    <template #default>
      <input v-model="input" />
    </template>

  </DefaultLayout>
</template>

On Windows Chrome and Firefox everything works as expected: I input some text, the button gets enabled. I delete the text, the button is disabled again.

But when I try it on Android Chrome, the disabled state of the button does not change when I input something neither when I unfocus the input after inputting.

However, when I move the button element into the default slot next to the input, it gets updated properly.

I suppose, this is some kind of optimization issue on Android?
Also, when trying to build a minimal working example on Vue SFC Playground, the issue didn't occur, so I guess it might have to do with Vue Router?
Can I do anything about it?

[dasdawidt]

After I struggled with this for almost a week now, only today I found out, it may have to do with another dependency of DefaultLayout:

I had defined a ComputedRef called isOnMobile in a spearate file, which I imported everywhere I needed.
In DefaultLayout I used that for conditional rendering and somehow it blocked the reactivity...

I still don't understand why, so any answer is welcome still.
The code of the mobile detection function you'll find in this Gist.