Two way binding not working in an Array of Objects using EmberJS

Question

I'm trying to update the content of an array of objects in EmberJS (Version 3.26). I can able to update the content. But it is not reflecting in my UI. I think, my issue is related to two-way binding.

I have already added a trackable decorator (@tracked) for this. It is working for the normal variable. But not for Array of Objects. Please see my JS code below:

    @tracked content = [
        {
          id: 0,
          name: 'Statndard',
          isExpanded: true,
          isSelected: false,
          isVisible: true,
          status: 'Allow',
          children: [
            {
              id: 1,
              name: 'Building A',
              isExpanded: true,
              isSelected: false,
              isVisible: true,
              status: 'Allow',
              children: [],
            },
            {
              id: 2,
              name: 'Building B',
              isExpanded: true,
              isSelected: false,
              isVisible: true,
              status: 'Allow',
              children: [
                {
                  id: 3,
                  name: 'Floor 1',
                  isExpanded: true,
                  isSelected: true,
                  isVisible: true,
                  status: 'Allow',
                  children: [],
                }
              ],
            },
          ],
        },   
];

I have added a method for updating the content array. It is properly updating my array. But the changes not reflecting my UI. My UI code is given below:

{{#x-tree
model=content
as |node|
}}
{{node.model.name}} <br />
<span {{on "click" (fn this.onToggleStatus node)}}>
    {{node.model.status}}</span>
{{node.toggle}}
{{/x-tree}}

I'm using ember simple tree for showing the above array as a tree. Any help would be appreciable!