x-model on object

[bayulaxana]

Hello. I need help. Is it really possible to use x-model to bind value inside an object? For example, like this:

HTML

<form action="" x-data="Component">
  <input type="text" x-model="data.name">
  <input type="text" x-model="data.email">
</form>

Javascript

function component() {
  return {
    data: {
      name: "",
      email: "",
    }
  };
}

document.addEventListener("alpine:init", () => {
  Alpine.data('Component', component);
});

I am using Alpinejs for browser version 3.2.2.
I tried, but it doesn't work. Maybe anyone knows the better approach instead of regular ways (placing the data on the top-level object)?

function component() {
  return {
    name: "",
    email: "",
  };
}

After some browsing, I found that this codepen worked, but I don't know exactly what version of alpine is being used.

https://codepen.io/jreviews/pen/NWPMVMz

I can't tell whether this is a bug or intended to work like that. Appreciate any answer.
Thank you in advance

[SimoTod]

It seems to work for me.
https://codepen.io/SimoTod/pen/PoKZZxm

[bayulaxana]

Thank you very much. After I did some checking, there was a mistake in my code.