Watching clientX/clientY values as PROPS only work when mouse moves alongside the x-achsis

[DevKame]

Im using <script setup> with Vue 3 with Typescript

My parentComponent ButtonWrapper.vue contains two PrimButton.vue Components. Depending on the mousemovement within ButtonWrapper.vue i am going to manipulate the Background-images of my PrimButtons. For that i need to identify the mouseposition when moving the mouse over ButtonWrapper.

ButtonWrapper.vue:

<template>
    <div @pointermove="computeButtonBg" class="button-wrapper py-2 d-flex justify-content-start align-items-center position-sticky">
        <prim-btn :cx="cx" content="LOGIN"></prim-btn>
        <prim-btn :cy="cy" content="CREATE ACCOUNT"></prim-btn>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

//   THE CURRENT MOUSE X AND Y POSITIONS ARE SAVED INTO THE REACTIVE VARIABLES cx and cy:
function computeButtonBg({clientX: x, clientY: y}: {clientX: number, clientY: number}) {
    cx.value = x;
    cy.value = y;
}

const cx = ref<number>(0);
const cy = ref<number>(0);
</script>

PrimButton.vue:

<template>
    <button>
        {{ content }}
    </button>
</template>

<script lang="ts" setup>
import { watch, computed} from 'vue';
const props = defineProps([
    "content",
    "cx",
    "cy",
]);
// USING COMPUTED TO MAKE THE RECEIVED VALUES REACTIVE
const cx = computed(() => {
    return props.cx;
});
const cy = computed(() => {
    return props.cy;
});

// WATCHING FOR BOTH VALUES SIMULTANEOUSLY:
watch([cx, cy], (newvalues, oldvalues) => {
    console.clear();
    console.table(newvalues);
    console.table(oldvalues);
});
</script>

What is confusing is the fact that as long as i move my mouse alongside the x achsis, it works:

But as soon as i move the mouse alongside the y achsis, both values become undefined:

Why is that? What did i do wrong?

EDIT: I just corrected the wrong syntax in the callbackfunction in the watch function. But still with the same result, only that, when i move alongside the x axis, the values for cy are undefined and if i move alongside the y axis, vice versa:

EDIT2": I switched to using Provide/Inject but just to be able to keep working. It should also be possible to do that with props, dont you think?

[LinusBorg]

You are misreading your own console logs.

• The watchers in the child component run console.clear()
• So the tables you see are from the component whose watch ran last.
• You have two instances of the button component: one receives cx (so cy is undefined), one receives cy (so cx is undefined)
• When you scroll horizontally, only cx changes, so only the button receiving cx will update, and log what you see on your screenshot - cy being undefined because you never passed a value to that button.
• When you scroll vertically, the same happens but for the other button: that other button receives the new cy value and thus updates, but it doesn't receive cx, so it's undefined.