Can't get component to re-render when trait value changes

[NavaceSystem]

Hi, I'm new to grapesjs and trying it out to validate a basic product idea. I'm unable to get my custom component to re-render when a trait value has changed. I might be missing something basic.

editor.current = grapesjs.init({
			container: "#gjs",
			fromElement: true,
			height: "500px",
			width: "auto",
			storageManager: false,
			blockManager: {
				appendTo: "#blocks",
				blocks: [
					{
						id: "list-type",
						label: "List",
						content: { type: "list-type" },
					},
				],
			},
			plugins: [listPlugin],
		})


function listPlugin(editor: Editor) {
	editor.Components.addType("list-type", {
		isComponent: (element) => {
			return element.tagName === "DIV";
		},

		model: {
			defaults: {
				tagName: "div",
				droppable: false,
				traits: [
					{
				            name: "data-source",
				            type: "text",
				            default: "",
					},
				],

				components: (model) => {
                                         // get trait value from model
					console.log("component rendered");
					return `<div>List test: aaa </div>`;
				},
			},
		},
		view: {
			init() {
				this.listenTo(this.model, "trait:value", (event) => {
					console.log("trait changed", event);
					this.render();
				});
			},
		},
	});
}

When I add the list-type component to canvas I can see the component rendered log. I can also see the trait changed log when I update the trait value but this.render() on the following line does nothing. I was expecting to see component rendered again with the model having the new trait values. I've tried suggestions from previous discussions here but no luck.

Any help would be appreciated.

[artf]

The components in defaults works only during the initialization.
Traits by default are bonded to attributes/props of the component, if you need to update, for example, the inner component, you have to opt-in for a custom logic

[NavaceSystem]

Got it, thanks.