$onUpdated Hook not functioning on imported component

[travelsetu]

I've encountered a problem with lifecycle hooks. Specifically, when I import a component, the $onUpdated hook doesn't seem to function properly when the props are updated in the main component.

Expected Behaviour Retrieve the updated data on the $onUpdated hook of the Subcomponent when data is updated in the main component.

Actual Behaviour No data is received

Please check:

app.js

...
import chart from "../components/chart.f7"
Framework7.registerComponent(
  'x-chart', chart
)
...

Main Chart Component

<template>
  <div class="page" data-name="charts">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
          </a>
        </div>
        <div class="title">About</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Charts</div>
      <div class="block">
        <x-chart data-title="Monthly Sales" data-chartdata="${chartdata}"></x-chart>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $on, $update }) => {
    let chartdata = [1, 2, 3]
    $on('pageInit', function () {
      setTimeout(function () {
        chartdata = [3, 4, 5]
        $update()
      }, 2000)
    })
    return $render;
  };
</script>

Subcomponent: components/chart.f7"

<template>
    <div>
        <div>${props.dataTitle}</div>
        <canvas></canvas>
    </div>
</template>
<script>
    export default (props, { $on, $onUpdated }) => {
        console.log(props)
        $onUpdated(function () {
            console.log(props)
        })
        return $render;
    };
</script>