Child component init twice using inline strategy

[jgauna]

Hi, I don't know if missing something but here's the scenario:

<!-- Home Section -->
<div x-transition ax-load ax-load-src="js/components/OrderModule/order.js" x-data="orderModule()" x-html="view" x-ignore></div>

import Order from './order.html?raw';

export default function orderModule() {
  return {
    welcome: 'Order Module Inited',
    view: Order,
    init() {
      console.log(this.welcome);
      this.$root.innerHTML = this.view;
    }
  };
};

The orderModule component loads perfectly. But then ...

<!-- Order Section -->
<div x-transition ax-load ax-load-src="js/components/ChildModule/child.js" x-data="childModule()" x-html="view" x-ignore></div>

import ChildOrder from './child.html?raw';

export default function childModule() {
  return {
    welcome: 'Child Order Module Inited',
    view: ChildOrder,
    init() {
      // Prints "Child Order Module Inited" twice
      console.log(this.welcome);
      this.$root.innerHTML = this.view;
    }
  };
};

The childModule init method runs twice. Maybe I'm missing something because if I move the childModule to HomeModule (where the OrderModule is) it will only run once.

If not missing anything then I think each module runs one time per child level (third-level nesting will run 3 times)

[jgauna]

Never mind. This is the error this.$root.innerHTML = this.view;. Don't know why that was there.