title: Polymer app-route subroute does not update with route change
body: <p>My problem involves chaining app-route. Originally I thought this bug came from my application but I recreated it with a simple example. The issue arises from first visiting a url that matches the subroute and then changing the route so that it does not match the subroute.</p>
  
  <p>I cannot use the Polymer cdn base tag because it will change the behavior of routing. If you copy and paste the code run <code>bower init; bower install --save PolymerElements/app-route; python3 -m http.server;</code> It should run the example code.</p>
  
  <h1>The Problem</h1>
  
  <ol>
  <li>Click link to <code>#/tree/maple</code> causes routeData.collection = 'tree', subrouteData.uuid = 'maple'. <em>This is correct and behaves as expected</em></li>
  <li>Next click link to <code>#/tree</code> causes routeData.collection = 'tree', subrouteData.uuid = 'maple'. <strong>notice nothing changes</strong></li>
  </ol>
  
  <p>Notice how even though the path changed to <code>#/tree</code> <strong>the subroute did not update</strong>. Is this a problem with my understanding of <code>app-route</code>?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  
    &lt;link rel="import" href="./bower_components/app-route/app-route.html"&gt;
    &lt;link rel="import" href="./bower_components/app-route/app-location.html"&gt;
    &lt;link rel="import" href="./bower_components/polymer/polymer.html"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;x-example&gt;&lt;/x-example&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;dom-module id="x-example"&gt;
    &lt;template&gt;
      &lt;style&gt;
      &lt;/style&gt;
      &lt;app-location route="{{route}}" use-hash-as-path&gt;&lt;/app-location&gt;
      &lt;app-route route="{{route}}" pattern="/:collection" data="{{routeData}}" tail="{{subroute}}"&gt;&lt;/app-route&gt;
      &lt;app-route route="{{subroute}}" pattern="/:uuid" data="{{subrouteData}}"&gt;&lt;/app-route&gt;
  
      &lt;h1&gt;Path&lt;/h1&gt; 
      &lt;p&gt;route: [[routeData.collection]]&lt;/p&gt;
      &lt;p&gt;subroute: [[subrouteData.uuid]]&lt;/p&gt;
  
      Visit: [In Order]
      &lt;a href="#/tree/maple"&gt;[2] Collection [TREE] UUID [MAPLE]&lt;/a&gt; -&gt;
      &lt;a href="#/tree"&gt;[1] Collection [TREE]&lt;/a&gt; 
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
        is: "x-example",
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Possible Solution but not as clean</h2>
  
  <pre><code>&lt;app-route route="{{route}}" pattern="/:collection" data="{{listData}}" active="{{listActive}}"&gt;&lt;/app-route&gt;
  &lt;app-route route="{{route}}" pattern="/:collection/:uuid" data="{{itemData}}" active="{{itemActive}}"&gt;&lt;/app-route&gt;
  </code></pre>
  
  <p>It <code>item</code> would get preference.</p>