Constructing nested objects in parent constructor

Help Requests
1

If I have a component bar() can I nest them in a parent component by creating them in the parent constructor and then loop through them using their template ?
If I do something like below if just displays [object Object]

Ie something like

class bar() {
    constructor(some_arg) {
       self.some_arg = some_arg;
   }
}

bar.html
<template>
${some_arg}
</template>


class Foo() {
     constructor(some_arg) {
         this.bars.push(new Bar("Arg"));
   }
}

foo.html

<div repeat.for="b of bars">${b}</div>    // How do I display bar template here ?
2

foo.html
<div repeat.for=“b of bars”>${b.some_arg}</div>

3

I felt you somehow confused about model and view-model.

If you want to use Bar class as a model, delete bar.html, use stevies’s sugguestion.

If you want to use Bar class as a view model,

bar.js

class Bar() {
  @bindable someArg;
}

bar.html

<template>
${someArg}
</template>

foo.js

class Foo() {
  bars = [];
  constructor() {
    this.bars.push('Arg');
  }
}

foo.html

<template>
  <require from="./bar"></require>
  <bar repeat.for="b of bars" some-arg.bind="b"></bar>
</template>
4

I wanted the whole model to display. In the end I did

<compose view-model.bind="b" repeat.for="b of bars"></compose>

which seems to work