Polymer _routePageChagned running twice

Question

When I change the page via a link or via JS this.set('route.path', 'packages'); the _routePageChagned method is running twice. Its also happening on when the page loads for the first time.

This is also happening in the default polymer starter kit template build from the CLI.

I'm I missing something? How can this occur?

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="my-icons.html">

<link rel="import" href="pages/my-loading.html">

<dom-module id="my-app">
  <template>
    <style>
    </style>


    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

        <iron-pages
            id="pages"
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="view404"
            selected-attribute="visible"
            role="main">

          <my-loading name="loading"></my-loading>
          <my-login name="login"></my-login>
          <my-view404 name="view404"></my-view404>
          <my-view403 name="view403"></my-view403>
          <my-packages name="packages"></my-packages>
        </iron-pages>
  </template>

  <script>
    Polymer({
      is: 'my-app',

      properties: {
        /**
         * The current page.
         */
        page: {
          type: String,
          reflectToAttribute: true
        },
      },

      observers: [
        '_routePageChanged(routeData.page)'
      ],


      _routePageChanged: function(page) {
        console.log(page);
        var resolvedPageUrl = this.resolveUrl('pages/my-' + page + '.html');
        this.importHref(resolvedPageUrl, function() {
          this.page = page;
        }.bind(this), undefined, false);
      }

    });
  </script>
</dom-module>

Answer 1

This works as a hack fix, still no idea why it's needed though.

_pageChange: function(page) {
  this.debounce(function() {
    // Load page import on demand. Show 404 page if fails
    var resolvedPageUrl = this.resolveUrl('pages/my-' + page + '.html');
    this.importHref(resolvedPageUrl,
    this._pageLoaded.bind(this, page),      // loaded callback
    this._pageChange.bind(this, 'view404'),
    true);
  }.bind(this), 100);
}