diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx
index 5aaacb6411..27241ee968 100644
--- a/packages/core/src/components/nav/nav.tsx
+++ b/packages/core/src/components/nav/nav.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
 import {
   Animation,
   AnimationController,
@@ -103,10 +103,19 @@ export class Nav implements PublicNav, NavContainer {
     }
     this.init = true;
     if (!this.useRouter) {
+      console.log('componentDidLoadImpl: ', this.root);
       componentDidLoadImpl(this);
     }
   }
 
+  @Watch('root')
+  updateRootComponent(): any {
+    console.log('updateRootComponent: ', this.root);
+    if (this.init) {
+      return this.setRoot(this.root);
+    }
+  }
+
   getViews(): PublicViewController[] {
     return getViews(this);
   }
diff --git a/packages/core/src/components/nav/test/set-root/index.html b/packages/core/src/components/nav/test/set-root/index.html
new file mode 100644
index 0000000000..823c9ed9b6
--- /dev/null
+++ b/packages/core/src/components/nav/test/set-root/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body onload="initiaize()">
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+</body>
+
+<script>
+
+  class PageOne extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+      <ion-page>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          <h1>Page One</h1>
+          <ion-button class="next">Go to Page Two</ion-button>
+        </ion-content>
+      </ion-page>`;
+
+      const button = this.querySelector('ion-button');
+      button.addEventListener('click', async () => {
+        this.closest('ion-nav').push('page-two');
+      });
+    }
+  }
+
+  class PageTwo extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+        <ion-page>
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Page Two</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content padding>
+            <h1>Page Two</h1>
+            <ion-button class="next">Go to Page Three</ion-button>
+            <ion-button class="previous">Go Back</ion-button>
+          </ion-content>
+        </ion-page>`;
+
+      const previousButton = this.querySelector('ion-button.previous');
+      previousButton.addEventListener('click', async () => {
+        await this.closest('ion-nav').pop();
+      });
+
+      const nextButton = this.querySelector('ion-button.next');
+      nextButton.addEventListener('click', async () => {
+        await this.closest('ion-nav').push('page-three');
+      });
+    }
+  }
+
+  class PageThree extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+        <ion-page>
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Page Three</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content padding>
+            <h1>Page Three</h1>
+            <ion-button class="previous">Go Back</ion-button>
+          </ion-content>
+        </ion-page>`;
+
+      const previousButton = this.querySelector('ion-button.previous');
+      previousButton.addEventListener('click', async () => {
+        await this.closest('ion-nav').pop();
+      });
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+  customElements.define('page-three', PageThree);
+
+  async function initiaize() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    nav.root = 'page-one';
+
+    setInterval(() => {
+      if (nav.root === 'page-one') {
+        nav.root = 'page-two';
+      } else if ( nav.root === 'page-two') {
+        nav.root = 'page-three';
+      } else {
+        nav.root = 'page-one';
+      }
+    }, 1000);
+  }
+
+</script>
+</html>
