Alpine Expression Error: cards is not defined

Question

I have this views/Home.html:

<div x-data="cards">
  <h2>Bienvenue sur SwiftDeli !</h2>
  <p>
    Commencez à créer et partager des recettes, ingrédients et listes de
    courses.
  </p>

  <div class="grid">
    <template x-for="card in cards" :key="card.url">
      <a :href="card.url" class="clickable-card">
        <h3 x-text="card.title"></h3>
        <p x-text="card.description"></p>
      </a>
    </template>
  </div>
</div>

And this views/Home.js:

import template from "./Home.html?raw";
console.log("HTML Home View Loaded");

// Define the cards array
const cards = [
  {
    url: "/create-recipe",
    title: "Ajouter une recette",
    description: "Cliquez pour créer une nouvelle recette.",
  },
  {
    url: "/recipes",
    title: "Consulter les recettes",
    description: "Cliquez pour voir toutes les recettes.",
  },
  {
    url: "/groceries",
    title: "Aller aux courses",
    description: "Cliquez pour voir votre liste de courses.",
  },
];

// Register the cards component with Alpine.js
document.addEventListener("alpine:init", () => {
  console.log("Alpine.js initialized");
  Alpine.data("cards", () => ({
    cards: cards,
  }));
});

// Initialize the component
export default () => ({
  init() {
    console.log("Home View Loaded");

    // Inject the template into the DOM
    const contentElement = document.getElementById("content");
    contentElement.innerHTML = template;

    // Initialize Alpine.js on the new content
    Alpine.initTree(contentElement);
    console.log("Alpine.js initialized on new content");
  },
});

I use Vite, which seem to work fine and here is my main.js:

import Alpine from "alpinejs";
import Navigo from "navigo";

// Initialize Alpine.js
window.Alpine = Alpine;
Alpine.start();

// Initialize Navigo router
const router = new Navigo("/");

// Define views (dynamically loaded)
const views = {
  home: () => import("./views/Home.js")
};

// Router setup
router.on({
  "/": async () => {
    const { default: Home } = await views.home();
    const homeView = Home();
    homeView.init();
  },
  "*": () => {
    document.getElementById("content").innerHTML = "<h2>Page non trouvée</h2>";
  },
});

router.resolve();

When loading the home page I get Alpine Expression Error: cards is not defined. I have the feeling the cards variable is not passed to the HTML, but I wonder how to check that, and resolve this issue. I can see my layout just fine, just without the cards.