I am new in vue and laravel.

I am trying to pass on a data to vue from blade. I am sure I am mising something very simple, but cant see it.

app.js

import "./bootstrap";

import { createApp } from "vue";
import releases from "./vue/Releases.vue";
createApp(releases).mount("#v-releases");

index.blade.php

<x-layout.basic>
    <div id="v-releases" userData="1"></div>
</x-layout.basic>

for index.blade.php, I also tried

<x-layout.basic>
    <div id="v-releases" :userData="1"></div>
</x-layout.basic>

Releases.vue

<template>
  <div>userIsAdmin: {{ userIsAdmin }}</div>
</template>

<script setup>
  import { computed } from 'vue';

  const props = defineProps({
    userData: {
      type: Number,
      required: true,
    },
  });

  const userIsAdmin = computed(() => props.userData === 1);
  console.log('User data:', props.userData);
</script>

Result: userIsAdmin: false where it should be true.
And on console: Missing required prop: "userData"

What am I missing???

I expect userIsAdmin: true