setState in component router

I have a problem…

When I use this router component : if I update the myName value from “Olivier” to “John” and apply a setState, the update is effective on the component template, but not on the popover created in the pageInit section.
It don’t take the new myName value.

Is it a normal behavior ? Thanks a lot

{
				   path: '/spaces-members/',
				    // Component Object
				    component: {
				      template: `
				        <div class="page">
				          <div class="navbar">
				            <div class="navbar-bg"></div>
				            <div class="navbar-inner">
				              <div class="title">{{title}}</div>
				            </div>
				          </div>
				          <div class="page-content">
				            <a @click="openAlert" class="red-link">Open Alert {{myName}}</a>
				            <div class="list simple-list">
				              <ul>
				                {{#each names}}
				                  <li>{{this}}</li>
				                {{/each}}
				              </ul>
				            </div>
				          </div>
				        </div>
				      `,
				      style: `
				        .red-link {
				          color: red;
				        }
				      `,
				      data: function () {
				        return {
				          title: 'Component Page',
				          names: ['John', 'Vladimir', 'Timo'],
						  myName : 'Olivier'
				        }
				      },
				      methods: {
				        openAlert: function () {
				          var self = this;
				          self.$app.dialog.alert('Hello world!'+this.myVar);
				        },
				      },
				      on: {
				        pageInit: function (e, page) {
							
							var self=this;
				          // do something on page init
						  
						  			setTimeout(  function() { 
										  
								
										  self.$setState({myName : 'John'});
										  
										  
									 }, 2000)
															  
									// Create dynamic Popover
									var dynamicPopover = app.popover.create({
									  targetX: 2500,
             						  targetY: 40,
									  content: '<div class="popover">'+
									              '<div class="popover-inner">'+
									                '<div class="block">'+
									                  '<p>Hello '+this.myName+'</p>'+
									                  '<p><a href="#" class="link popover-close">Close me</a></p>'+
									                '</div>'+
									              '</div>'+
									            '</div>',
									  // Events
									  on: {
									    open: function (popover) {
									      console.log('Popover open');
									    },
									    opened: function (popover) {
									      console.log('Popover opened');
									    },
									  }
									});
									// Events also can be assigned on instance later
									dynamicPopover.on('close', function (popover) {
									  console.log('Popover close');
									});
									dynamicPopover.on('closed', function (popover) {
									  console.log('Popover closed');
									});
									
									// Open dynamic popover
									$$('.dynamic-popover').on('click', function () {
									  dynamicPopover.open();
									});			
									
									dynamicPopover.open();			  
															  
															  
															  
						  
						  
				        },
				        pageAfterOut: function (e, page) {
				          // page has left the view
				        },
				      }
				    },
				 
		  }

I had to move the popover template from the “template” parameter to the template of the component, and link it with “el” parameter of popover create.

So if I understand, only the Template of the component is updated with setState. It don’t impact for example function calls with updated variables

So it is solved for me, but I would appreciate of what setState do precisely

thanks

Yes, only what is inside <template> can be updated