Indicator is not shown when it has PagerItems defined, the property showIndicator is true

[ebsi-lruiz]

When defining PagerItems as Pager content, the indicator is not shown (showIndicator is set true) I'm using nativescript-vue

Dependencies: "@nativescript-community/ui-pager": "^13.0.37", "@nativescript/core": "^8.2.1", "@nativescript/android": "^8.2.2", "@nativescript/ios": "^8.2.2", "@nativescript/types": "^8.0.0", "nativescript-vue": "~2.9.0"

Code:

  <Page>
    <ActionBar>
      <Label text="Home"/>
    </ActionBar>
    <GridLayout height="300" width="100%" backgroundColor="white">
      <Pager
        height="250"
        width="100%"
        orientation="horizontal"
        :selectedIndex="selectedIndex"
        @selectedIndexChange="onSelectedIndexChanged"
        verticalAlignment="top"
        indicator="fill"
        indicatorColor="blue"
        indicatorSelectedColor="red"
        showIndicator="true"
      >
        <PagerItem v-for="(item, i) in items" :key="i">
         <GridLayout height="100%" :backgroundColor="item.color" opacity="0.5">
            <Label verticalAlignment="top" :text="item.title" />
            <Button  verticalAlignment="middle" @tap="onTap" :text="'Click ' + item.title" />
          </GridLayout> 
        </PagerItem>
      </Pager>
    </GridLayout>
  </Page>
</template>
<script lang="ts">
  import Vue from "nativescript-vue"

  export default Vue.extend({
     data() {
      return {
        items: [
          { title: 'First', color: '#e67e22' },
          { title: 'Second', color: '#3498db' },
          { title: 'Third', color: '#e74c3c' },
          { title: 'Fourth', color: '#9b59b6' },
        ],
        selectedIndex: 0,
      }
    },
    methods: {
      onTap() {
        console.log('***********************On tapped')
      },
      onSelectedIndexChanged(args: { value:number }){
        this.selectedIndex = args.value;
      },
    }
  });
</script>```