Use AlpineJS data in django-cotton component

I'm trying to use AlpineJS jointly with django-cotton components. I tried the following but it did not work.

<div x-data="{ message: 'I ❤️ Alpine' }">
    <c-card x-bind:title="message" x-text="message"></c-card>
</div>

with django-cotton card component simply copied from django-cotton Quickstart.

<div>
    <h2>{{ title }}</h2>
    <p>{{ slot }}</p>
</div>

Is there a way to achieve this?

cotton/card.html

<div>
  <h2 x-text="message"></h2>
  <p>{{ slot }}</p>
</div>

<div x-data="{ message: 'I ❤️ Alpine' }">
  <c-card >content slot here</c-card>
</div>

other method

<div {{attrs}}>
  <h2 x-text="message"></h2>
  <p>{{ slot }}</p>
</div>

<c-card x-data="{
  message: 'I ❤️ Alpine'
}">Some content</c-card>
Back to Top