[0.9] "dom-if" not binding to an object's boolean property #1606

<dom-module id="user-page">

  <template>

    All users will see this:
    <div>{{user.name}}</div>

    <template is="dom-if" if="{{user.isAdmin}}">
      Only admins will see this.
      <div>{{user.secretAdminStuff}}</div>
    </template>

  </template>

  <script>
    Polymer({
      is: 'user-page',
      properties: {
        user: Object
      }
    });
  </script>

</dom-module>

  <link rel="import" href="/bower_components/polymer/polymer.html">

  <dom-module id="test-pages">
    <template>
      <template is="dom-if" if="{{pages.page1}}">Page ONE</template>
      <template is="dom-if" if="{{pages.page2}}">Page TWO</template>
      <template is="dom-if" if="{{page3}}">Page THREE</template>
    </template>
  </dom-module>
  <script>
    Polymer({
      is: "test-pages",
      properties: {

        pages: {
          type: Object,
          value: function () { return {

              "page1": false,
              "page2": false

          }; }
        },

        page3: {
          type: Boolean,
          value: false
        }

      }
    });
  </script>

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="/elements/test-pages.html">
</head>

<body class="fullbleed">

  <test-pages></test-pages>

  <script>      
    var app = {};
    document.addEventListener("WebComponentsReady", function (e) {
      app = document.querySelector("test-pages");

      // These do not work:
      app.pages.page1 = true;
      app.pages.page2 = true;

      // However, this works:
      app.page3 = true;

    });
  </script>

</body>
</html>