diff --git a/src/LiveComponent/README.md b/src/LiveComponent/README.md
index 3668d771348..32dfe340461 100644
--- a/src/LiveComponent/README.md
+++ b/src/LiveComponent/README.md
@@ -361,6 +361,9 @@ code works identically to the previous example:
 </div>
 ```
 
+If an element has _both_ `data-model` and `name` attributes, the
+`data-model` attribute takes precedence.
+
 ## Loading States
 
 Often, you'll want to show (or hide) an element while a component is
@@ -1135,3 +1138,226 @@ You can also trigger a specific "action" instead of a normal re-render:
     #}
 >
 ```
+
+## Embedded Components
+
+Need to embed one live component inside another one? No problem! As a rule
+of thumb, **each component exists in its own, isolated universe**. This
+means that embedding one component inside another could be really simple
+or a bit more complex, depending on how inter-connected you want your components
+to be.
+
+Here are a few helpful things to know:
+
+### Each component re-renders independent of one another
+
+If a parent component re-renders, the child component will _not_ (most
+of the time) be updated, even though it lives inside the parent. Each
+component is its own, isolated universe.
+
+But this is not always what you want. For example, suppose you have a
+parent component that renders a form and a child component that renders
+one field in that form. When you click a "Save" button on the parent
+component, that validates the form and re-renders with errors - including
+a new `error` value that it passes into the child:
+
+```twig
+{# templates/components/post_form.html.twig #}
+
+{{ component('textarea_field', {
+    value: this.content,
+    error: this.getError('content')
+}) }}
+```
+
+In this situation, when the parent component re-renders after clicking
+"Save", you _do_ want the updated child component (with the validation
+error) to be rendered. And this _will_ happen automatically. Why? because
+the live component system detects that the **parent component has
+_changed_ how it's rendering the child**.
+
+This may not always be perfect, and if your child component has its own
+`LiveProp` that has changed since it was first rendered, that value will
+be lost when the parent component causes the child to re-render. If you
+have this situation, use `data-model-map` to map that child `LiveProp` to
+a `LiveProp` in the parent component, and pass it into the child when
+rendering.
+
+### Actions, methods and model updates in a child do not affect the parent
+
+Again, each component is its own, isolated universe! For example, suppose
+your child component has:
+
+```html
+<button data-action="live#action" data-action-name="save">Save</button>
+```
+
+When the user clicks that button, it will attempt to call the `save` action
+in the _child_ component only, even if the `save` action actually only
+exists in the parent. The same is true for `data-model`, though there is
+some special handling for this case (see next point).
+
+### If a child model updates, it will attempt to update the parent model
+
+Suppose a child component has a:
+
+```html
+<textarea data-model="markdown_value" data-action="live#update">
+```
+
+When the user changes this field, this will _only_ update the `markdown_value`
+field in the _child_ component... because (yup, we're saying it again):
+each component is its own, isolated universe.
+
+However, sometimes this isn't what you want! Sometimes, in addition
+to updating the child component's model, you _also_ want to update a
+model on the _parent_ component.
+
+To help with this, whenever a model updates, a `live:update-model` event
+is dispatched. All components automatically listen to this event. This
+means that, when the `markdown_value` model is updated in the child
+component, _if_ the parent component _also_ has a model called `markdown_value`
+it will _also_ be updated. This is done as a "deferred" update
+(i.e. [updateDefer()](#deferring-a-re-render-until-later)).
+
+If the model name in your child component (e.g. `markdown_value`) is
+_different_ than the model name in your parent component (e.g. `post.content`),
+you have two options. First, you can make sure both are set by
+leveraging both the `data-model` and `name` attributes:
+
+```twig
+<textarea
+    data-model="markdown_value"
+    name="post[content]"
+    data-action="live#update"
+>
+```
+
+In this situation, the `markdown_value` model will be updated on the child
+component (because `data-model` takes precedence over `name`). But if
+any parent components have a `markdown_value` model _or_ a `post.content`
+model (normalized from `post[content`]`), their model will also be updated.
+
+A second option is to wrap your child element in a special `data-model-map`
+element:
+
+```twig
+{# templates/components/post_form.html.twig #}
+
+<div data-model-map="from(markdown_value)|post.content">
+    {{ component('textarea_field', {
+        value: this.content,
+        error: this.getError('content')
+    }) }}
+</div>
+```
+
+Thanks to the `data-model-map`, whenever the `markdown_value` model
+updates in the child component, the `post.content` model will be
+updated in the parent component.
+
+**NOTE**: If you _change_ a `LiveProp` of a child component on the server
+(e.g. during re-rendering or via an action), that change will _not_ be
+reflected on any parent components that share that model.
+
+### Full Embedded Component Example
+
+Let's look at a full, complex example of an embedded component. Suppose
+you have an `EditPostComponent`:
+
+```php
+<?php
+
+namespace App\Twig\Components;
+
+use App\Entity\Post;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+
+#[AsLiveComponent('edit_post')]
+final class EditPostComponent extends AbstractController
+{
+    #[LiveProp(exposed: ['title', 'content'])]
+    public Post $post;
+
+    #[LiveAction]
+    public function save(EntityManagerInterface $entityManager)
+    {
+        $entityManager->flush();
+
+        return $this->redirectToRoute('some_route');
+    }
+}
+```
+
+And a `MarkdownTextareaComponent`:
+
+```php
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+
+#[AsLiveComponent('markdown_textarea')]
+final class MarkdownTextareaComponent
+{
+    #[LiveProp]
+    public string $label;
+
+    #[LiveProp]
+    public string $name;
+
+    #[LiveProp(writable: true)]
+    public string $value = '';
+}
+```
+
+In the `EditPostComponent` template, you render the `MarkdownTextareaComponent`:
+
+```twig
+{# templates/components/edit_post.html.twig #}
+<div {{ init_live_component(this) }}>
+    <input
+        type="text"
+        name="post[title]"
+        data-action="live#update"
+        value="{{ this.post.title }}"
+    >
+
+    {{ component('markdown_textarea', {
+        name: 'post[content]',
+        label: 'Content',
+        value: this.post.content
+    }) }}
+
+    <button
+        data-action="live#action"
+        data-action-name="save"
+    >Save</button>
+</div>
+```
+
+```twig
+<div {{ init_live_component(this) }} class="mb-3">
+    <textarea
+        name="{{ this.name }}"
+        data-model="value"
+        data-action="live#update"
+    >{{ this.value }}</textarea>
+
+    <div class="markdown-preview">
+        {{ this.value|markdown_to_html }}
+    </div>
+</div>
+```
+
+Notice that `MarkdownTextareaComponent` allows a dynamic `name` attribute to
+be passed in. This makes that component re-usable in any form. But it
+also makes sure that when the `textarea` changes, both the `value` model
+in `MarkdownTextareaComponent` _and_ the `post.content` model in
+`EditPostcomponent` will be updated.
diff --git a/src/LiveComponent/assets/dist/live-controller.esm.js b/src/LiveComponent/assets/dist/live-controller.esm.js
index 6f1c03fc6fb..f79abed20ad 100644
--- a/src/LiveComponent/assets/dist/live-controller.esm.js
+++ b/src/LiveComponent/assets/dist/live-controller.esm.js
@@ -1250,6 +1250,8 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "connect",
     value: function connect() {
+      var _this2 = this;
+
       // hide "loading" elements to begin with
       // This is done with CSS, but only for the most basic cases
       this._onLoadingFinish();
@@ -1259,6 +1261,14 @@ var _default = /*#__PURE__*/function (_Controller) {
       }
 
       window.addEventListener('beforeunload', this.markAsWindowUnloaded);
+      this.element.addEventListener('live:update-model', function (event) {
+        // ignore events that we dispatched
+        if (event.target === _this2.element) {
+          return;
+        }
+
+        _this2._handleChildComponentUpdateModel(event);
+      });
 
       this._dispatchEvent('live:connect');
     }
@@ -1291,7 +1301,7 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "action",
     value: function action(event) {
-      var _this2 = this;
+      var _this3 = this;
 
       // using currentTarget means that the data-action and data-action-name
       // must live on the same element: you can't add
@@ -1311,9 +1321,9 @@ var _default = /*#__PURE__*/function (_Controller) {
           // then the action Ajax will start. We want to avoid the
           // re-render request from starting after the debounce and
           // taking precedence
-          _this2._clearWaitingDebouncedRenders();
+          _this3._clearWaitingDebouncedRenders();
 
-          _this2._makeRequest(directive.action);
+          _this3._makeRequest(directive.action);
         };
 
         var handled = false;
@@ -1338,13 +1348,13 @@ var _default = /*#__PURE__*/function (_Controller) {
               {
                 var length = modifier.value ? modifier.value : DEFAULT_DEBOUNCE; // clear any pending renders
 
-                if (_this2.actionDebounceTimeout) {
-                  clearTimeout(_this2.actionDebounceTimeout);
-                  _this2.actionDebounceTimeout = null;
+                if (_this3.actionDebounceTimeout) {
+                  clearTimeout(_this3.actionDebounceTimeout);
+                  _this3.actionDebounceTimeout = null;
                 }
 
-                _this2.actionDebounceTimeout = setTimeout(function () {
-                  _this2.actionDebounceTimeout = null;
+                _this3.actionDebounceTimeout = setTimeout(function () {
+                  _this3.actionDebounceTimeout = null;
 
                   _executeAction();
                 }, length);
@@ -1378,14 +1388,14 @@ var _default = /*#__PURE__*/function (_Controller) {
         throw new Error("The update() method could not be called for \"".concat(clonedElement.outerHTML, "\": the element must either have a \"data-model\" or \"name\" attribute set to the model name."));
       }
 
-      this.$updateModel(model, value, element, shouldRender);
+      this.$updateModel(model, value, shouldRender);
     }
   }, {
     key: "$updateModel",
-    value: function $updateModel(model, value, element) {
-      var _this3 = this;
+    value: function $updateModel(model, value) {
+      var _this4 = this;
 
-      var shouldRender = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+      var shouldRender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       var directives = parseDirectives(model);
 
       if (directives.length > 1) {
@@ -1414,7 +1424,12 @@ var _default = /*#__PURE__*/function (_Controller) {
 
       if (!doesDeepPropertyExist(this.dataValue, modelName)) {
         console.warn("Model \"".concat(modelName, "\" is not a valid data-model value"));
-      } // we do not send old and new data to the server
+      }
+
+      this._dispatchEvent('live:update-model', {
+        model: modelName,
+        value: value
+      }); // we do not send old and new data to the server
       // we merge in the new data now
       // TODO: handle edge case for top-level of a model with "exposed" props
       // For example, suppose there is a "post" field but "post.title" is exposed.
@@ -1443,16 +1458,16 @@ var _default = /*#__PURE__*/function (_Controller) {
         this._clearWaitingDebouncedRenders();
 
         this.renderDebounceTimeout = setTimeout(function () {
-          _this3.renderDebounceTimeout = null;
+          _this4.renderDebounceTimeout = null;
 
-          _this3.$render();
+          _this4.$render();
         }, this.debounceValue || DEFAULT_DEBOUNCE);
       }
     }
   }, {
     key: "_makeRequest",
     value: function _makeRequest(action) {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$urlValue$split = this.urlValue.split('?'),
           _this$urlValue$split2 = _slicedToArray(_this$urlValue$split, 2),
@@ -1489,15 +1504,15 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.renderPromiseStack.addPromise(thisPromise);
       thisPromise.then(function (response) {
         // if another re-render is scheduled, do not "run it over"
-        if (_this4.renderDebounceTimeout) {
+        if (_this5.renderDebounceTimeout) {
           return;
         }
 
-        var isMostRecent = _this4.renderPromiseStack.removePromise(thisPromise);
+        var isMostRecent = _this5.renderPromiseStack.removePromise(thisPromise);
 
         if (isMostRecent) {
           response.json().then(function (data) {
-            _this4._processRerender(data);
+            _this5._processRerender(data);
           });
         }
       });
@@ -1566,7 +1581,7 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "_handleLoadingToggle",
     value: function _handleLoadingToggle(isLoading) {
-      var _this5 = this;
+      var _this6 = this;
 
       this._getLoadingDirectives().forEach(function (_ref) {
         var element = _ref.element,
@@ -1574,13 +1589,13 @@ var _default = /*#__PURE__*/function (_Controller) {
 
         // so we can track, at any point, if an element is in a "loading" state
         if (isLoading) {
-          _this5._addAttributes(element, ['data-live-is-loading']);
+          _this6._addAttributes(element, ['data-live-is-loading']);
         } else {
-          _this5._removeAttributes(element, ['data-live-is-loading']);
+          _this6._removeAttributes(element, ['data-live-is-loading']);
         }
 
         directives.forEach(function (directive) {
-          _this5._handleLoadingDirective(element, isLoading, directive);
+          _this6._handleLoadingDirective(element, isLoading, directive);
         });
       });
     }
@@ -1594,7 +1609,7 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "_handleLoadingDirective",
     value: function _handleLoadingDirective(element, isLoading, directive) {
-      var _this6 = this;
+      var _this7 = this;
 
       var finalAction = parseLoadingAction(directive.action, isLoading);
       var loadingDirective = null;
@@ -1602,42 +1617,42 @@ var _default = /*#__PURE__*/function (_Controller) {
       switch (finalAction) {
         case 'show':
           loadingDirective = function loadingDirective() {
-            _this6._showElement(element);
+            _this7._showElement(element);
           };
 
           break;
 
         case 'hide':
           loadingDirective = function loadingDirective() {
-            return _this6._hideElement(element);
+            return _this7._hideElement(element);
           };
 
           break;
 
         case 'addClass':
           loadingDirective = function loadingDirective() {
-            return _this6._addClass(element, directive.args);
+            return _this7._addClass(element, directive.args);
           };
 
           break;
 
         case 'removeClass':
           loadingDirective = function loadingDirective() {
-            return _this6._removeClass(element, directive.args);
+            return _this7._removeClass(element, directive.args);
           };
 
           break;
 
         case 'addAttribute':
           loadingDirective = function loadingDirective() {
-            return _this6._addAttributes(element, directive.args);
+            return _this7._addAttributes(element, directive.args);
           };
 
           break;
 
         case 'removeAttribute':
           loadingDirective = function loadingDirective() {
-            return _this6._removeAttributes(element, directive.args);
+            return _this7._removeAttributes(element, directive.args);
           };
 
           break;
@@ -1741,7 +1756,7 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "_executeMorphdom",
     value: function _executeMorphdom(newHtml) {
-      var _this7 = this;
+      var _this8 = this;
 
       // https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro#answer-35385518
       function htmlToElement(html) {
@@ -1760,7 +1775,7 @@ var _default = /*#__PURE__*/function (_Controller) {
           } // avoid updating child components: they will handle themselves
 
 
-          if (fromEl.hasAttribute('data-controller') && fromEl.getAttribute('data-controller').split(' ').indexOf('live') !== -1 && fromEl !== _this7.element) {
+          if (fromEl.hasAttribute('data-controller') && fromEl.getAttribute('data-controller').split(' ').indexOf('live') !== -1 && fromEl !== _this8.element) {
             return false;
           }
 
@@ -1771,7 +1786,7 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "_initiatePolling",
     value: function _initiatePolling(rawPollConfig) {
-      var _this8 = this;
+      var _this9 = this;
 
       var directives = parseDirectives(rawPollConfig || '$render');
       directives.forEach(function (directive) {
@@ -1790,23 +1805,23 @@ var _default = /*#__PURE__*/function (_Controller) {
           }
         });
 
-        _this8.startPoll(directive.action, duration);
+        _this9._startPoll(directive.action, duration);
       });
     }
   }, {
-    key: "startPoll",
-    value: function startPoll(actionName, duration) {
-      var _this9 = this;
+    key: "_startPoll",
+    value: function _startPoll(actionName, duration) {
+      var _this10 = this;
 
       var callback;
 
       if (actionName.charAt(0) === '$') {
         callback = function callback() {
-          _this9[actionName]();
+          _this10[actionName]();
         };
       } else {
         callback = function callback() {
-          _this9._makeRequest(actionName);
+          _this10._makeRequest(actionName);
         };
       }
 
@@ -1827,6 +1842,15 @@ var _default = /*#__PURE__*/function (_Controller) {
       });
       return this.element.dispatchEvent(userEvent);
     }
+  }, {
+    key: "_handleChildComponentUpdateModel",
+    value: function _handleChildComponentUpdateModel(event) {
+      if (!doesDeepPropertyExist(this.dataValue, event.detail.model)) {
+        return;
+      }
+
+      this.$updateModel(event.detail.model, event.detail.value, false);
+    }
   }]);
 
   return _default;
diff --git a/src/LiveComponent/assets/src/have_rendered_values_changed.js b/src/LiveComponent/assets/src/have_rendered_values_changed.js
new file mode 100644
index 00000000000..98210c6fff9
--- /dev/null
+++ b/src/LiveComponent/assets/src/have_rendered_values_changed.js
@@ -0,0 +1,70 @@
+export function haveRenderedValuesChanged(originalDataJson, currentDataJson, newDataJson) {
+    /*
+     * Right now, if the "data" on the new value is different than
+     * the "original data" on the child element, then we force re-render
+     * the child component. There may be some other cases that we
+     * add later if they come up. Either way, this is probably the
+     * behavior we want most of the time, but it's not perfect. For
+     * example, if the child component has some a writable prop that
+     * has changed since the initial render, re-rendering the child
+     * component from the parent component will "eliminate" that
+     * change.
+     */
+
+    // if the original data matches the new data, then the parent
+    // hasn't changed how they render the child.
+    if (originalDataJson === newDataJson) {
+        return false;
+    }
+
+    // The child component IS now being rendered in a "new way".
+    // This means that at least one of the "data" pieces used
+    // to render the child component has changed.
+    // However, the piece of data that changed might simply
+    // match the "current data" of that child component. In that case,
+    // there is no point to re-rendering.
+    // And, to be safe (in case the child has some "private LiveProp"
+    // that has been modified), we want to avoid rendering.
+
+
+    // if the current data exactly matches the new data, then definitely
+    // do not re-render.
+    if (currentDataJson === newDataJson) {
+        return false;
+    }
+
+    // here, we will compare the original data for the child component
+    // with the new data. What we're looking for are they keys that
+    // have changed between the original "child rendering" and the
+    // new "child rendering".
+    const originalData = JSON.parse(originalDataJson);
+    const newData = JSON.parse(newDataJson);
+    const changedKeys = Object.keys(newData);
+    Object.entries(originalData).forEach(([key, value]) => {
+        // if any key in the new data is different than a key in the
+        // current data, then we *should* re-render. But if all the
+        // keys in the new data equal
+        if (value === newData[key]) {
+            // value is equal, remove from changedKeys
+            changedKeys.splice(changedKeys.indexOf(key), 1);
+        }
+    });
+
+    // now that we know which keys have changed between originally
+    // rendering the child component and this latest render, we
+    // can check to see if the the child component *already* has
+    // the latest value for those keys.
+
+    const currentData = JSON.parse(currentDataJson)
+    let keyHasChanged = false;
+    changedKeys.forEach((key) => {
+        // if any key in the new data is different than a key in the
+        // current data, then we *should* re-render. But if all the
+        // keys in the new data equal
+        if (currentData[key] !== newData[key]) {
+            keyHasChanged = true;
+        }
+    });
+
+    return keyHasChanged;
+}
diff --git a/src/LiveComponent/assets/src/live_controller.js b/src/LiveComponent/assets/src/live_controller.js
index 34c277b5762..7f997fadd3e 100644
--- a/src/LiveComponent/assets/src/live_controller.js
+++ b/src/LiveComponent/assets/src/live_controller.js
@@ -5,6 +5,7 @@ import { combineSpacedArray } from './string_utils';
 import { buildFormData, buildSearchParams } from './http_data_helper';
 import { setDeepData, doesDeepPropertyExist, normalizeModelName } from './set_deep_data';
 import './polyfills';
+import { haveRenderedValuesChanged } from './have_rendered_values_changed';
 
 const DEFAULT_DEBOUNCE = '150';
 
@@ -44,8 +45,12 @@ export default class extends Controller {
 
     isWindowUnloaded = false;
 
+    originalDataJSON;
+
     initialize() {
         this.markAsWindowUnloaded = this.markAsWindowUnloaded.bind(this);
+        this.originalDataJSON = JSON.stringify(this.dataValue);
+        this._exposeOriginalData();
     }
 
     connect() {
@@ -59,6 +64,15 @@ export default class extends Controller {
 
         window.addEventListener('beforeunload', this.markAsWindowUnloaded);
 
+        this.element.addEventListener('live:update-model', (event) => {
+            // ignore events that we dispatched
+            if (event.target === this.element) {
+                return;
+            }
+
+            this._handleChildComponentUpdateModel(event);
+        });
+
         this._dispatchEvent('live:connect');
     }
 
@@ -169,10 +183,27 @@ export default class extends Controller {
             throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-model" or "name" attribute set to the model name.`);
         }
 
-        this.$updateModel(model, value, element, shouldRender);
+        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null);
     }
 
-    $updateModel(model, value, element, shouldRender = true) {
+    /**
+     * Update a model value.
+     *
+     * The extraModelName should be set to the "name" attribute of an element
+     * if it has one. This is only important in a parent/child component,
+     * where, in the child, you might be updating a "foo" model, but you
+     * also want this update to "sync" to the parent component's "bar" model.
+     * Typically, setup on a field like this:
+     *
+     *      <input data-model="foo" name="bar">
+     *
+     * @param {string} model The model update, which could include modifiers
+     * @param {any} value The new value
+     * @param {boolean} shouldRender Whether a re-render should be triggered
+     * @param {string|null} extraModelName Another model name that this might go by in a parent component.
+     * @param {Object} options Options include: {bool} dispatch
+     */
+    $updateModel(model, value, shouldRender = true, extraModelName = null, options = {}) {
         const directives = parseDirectives(model);
         if (directives.length > 1) {
             throw new Error(`The data-model="${model}" format is invalid: it does not support multiple directives (i.e. remove any spaces).`);
@@ -185,6 +216,7 @@ export default class extends Controller {
         }
 
         const modelName = normalizeModelName(directive.action);
+        const normalizedExtraModelName = extraModelName ? normalizeModelName(extraModelName) : null;
 
         // if there is a "validatedFields" data, it means this component wants
         // to track which fields have been / should be validated.
@@ -197,8 +229,12 @@ export default class extends Controller {
             this.dataValue = setDeepData(this.dataValue, 'validatedFields', validatedFields);
         }
 
-        if (!doesDeepPropertyExist(this.dataValue, modelName)) {
-            console.warn(`Model "${modelName}" is not a valid data-model value`);
+        if (options.dispatch !== false) {
+            this._dispatchEvent('live:update-model', {
+                modelName,
+                extraModelName: normalizedExtraModelName,
+                value,
+            });
         }
 
         // we do not send old and new data to the server
@@ -499,6 +535,7 @@ export default class extends Controller {
                 if (fromEl.hasAttribute('data-controller')
                     && fromEl.getAttribute('data-controller').split(' ').indexOf('live') !== -1
                     && fromEl !== this.element
+                    && !this._shouldChildLiveElementUpdate(fromEl, toEl)
                 ) {
                     return false;
                 }
@@ -506,6 +543,8 @@ export default class extends Controller {
                 return true;
             }
         });
+        // restore the data-original-data attribute
+        this._exposeOriginalData();
     }
 
     markAsWindowUnloaded = () => {
@@ -531,11 +570,11 @@ export default class extends Controller {
                 }
             });
 
-            this.startPoll(directive.action, duration);
+            this._startPoll(directive.action, duration);
         })
     }
 
-    startPoll(actionName, duration) {
+    _startPoll(actionName, duration) {
         let callback;
         if (actionName.charAt(0) === '$') {
             callback = () => {
@@ -561,6 +600,104 @@ export default class extends Controller {
 
         return this.element.dispatchEvent(userEvent);
     }
+
+    _handleChildComponentUpdateModel(event) {
+        const mainModelName = event.detail.modelName;
+        const potentialModelNames = [
+            { name: mainModelName, required: false },
+            { name: event.detail.extraModelName, required: false },
+        ]
+
+        const modelMapElement = event.target.closest('[data-model-map]');
+        if (this.element.contains(modelMapElement)) {
+            const directives = parseDirectives(modelMapElement.dataset.modelMap);
+
+            directives.forEach((directive) => {
+                let from = null;
+                directive.modifiers.forEach((modifier) => {
+                    switch (modifier.name) {
+                        case 'from':
+                            if (!modifier.value) {
+                                throw new Error(`The from() modifier requires a model name in data-model-map="${modelMapElement.dataset.modelMap}"`);
+                            }
+                            from = modifier.value;
+
+                            break;
+                        default:
+                            console.warn(`Unknown modifier "${modifier.name}" in data-model-map="${modelMapElement.dataset.modelMap}".`);
+                    }
+                });
+
+                if (!from) {
+                    throw new Error(`Missing from() modifier in data-model-map="${modelMapElement.dataset.modelMap}". The format should be "from(childModelName)|parentModelName"`);
+                }
+
+                // only look maps for the model currently being updated
+                if (from !== mainModelName) {
+                    return;
+                }
+
+                potentialModelNames.push({ name: directive.action, required: true });
+            });
+        }
+
+        potentialModelNames.reverse();
+        let foundModelName = null;
+        potentialModelNames.forEach((potentialModel) => {
+            if (foundModelName) {
+                return;
+            }
+
+            if (doesDeepPropertyExist(this.dataValue, potentialModel.name)) {
+                foundModelName = potentialModel.name;
+
+                return;
+            }
+
+            if (potentialModel.required) {
+                throw new Error(`The model name "${potentialModel.name}" does not exist! Found in data-model-map="from(${mainModelName})|${potentialModel.name}"`);
+            }
+        });
+
+        if (!foundModelName) {
+            return;
+        }
+
+        this.$updateModel(
+            foundModelName,
+            event.detail.value,
+            false,
+            null,
+            {
+                dispatch: false
+            }
+        );
+    }
+
+    /**
+     * Determines of a child live element should be re-rendered.
+     *
+     * This is called when this element re-renders and detects that
+     * a child element is inside. Normally, in that case, we do not
+     * re-render the child element. However, if we detect that the
+     * "data" on the child element has changed from its initial data,
+     * then this will trigger a re-render.
+     *
+     * @param {Element} fromEl
+     * @param {Element} toEl
+     * @return {boolean}
+     */
+    _shouldChildLiveElementUpdate(fromEl, toEl) {
+        return haveRenderedValuesChanged(
+            fromEl.dataset.originalData,
+            fromEl.dataset.liveDataValue,
+            toEl.dataset.liveDataValue
+        );
+    }
+
+    _exposeOriginalData() {
+        this.element.dataset.originalData = this.originalDataJSON;
+    }
 }
 
 /**
diff --git a/src/LiveComponent/assets/src/set_deep_data.js b/src/LiveComponent/assets/src/set_deep_data.js
index 43d2f265bfa..e65608b9d3d 100644
--- a/src/LiveComponent/assets/src/set_deep_data.js
+++ b/src/LiveComponent/assets/src/set_deep_data.js
@@ -25,15 +25,14 @@ export function setDeepData(data, propertyPath, value) {
     }
 
     // represents a situation where the key you're setting *is* an object,
-    // but the key we're setting is a new key. This, perhaps, could be
-    // allowed. But right now, all keys should be initialized with the
-    // initial data.
+    // but the key we're setting is a new key. Currently, all keys should
+    // be initialized with the initial data.
     if (currentLevelData[finalKey] === undefined) {
         const lastPart = parts.pop();
         if (parts.length > 0) {
-            console.warn(`The property used in data-model="${propertyPath}" was never initialized. Did you forget to add exposed={"${lastPart}"} to its LiveProp?`)
+            throw new Error(`The property used in data-model="${propertyPath}" was never initialized. Did you forget to add exposed={"${lastPart}"} to its LiveProp?`)
         } else {
-            console.warn(`The property used in data-model="${propertyPath}" was never initialized. Did you forget to expose "${lastPart}" as a LiveProp?`)
+            throw new Error(`The property used in data-model="${propertyPath}" was never initialized. Did you forget to expose "${lastPart}" as a LiveProp? Available models values are: ${Object.keys(data).length > 0 ? Object.keys(data).join(', ') : '(none)'}`)
         }
     }
 
diff --git a/src/LiveComponent/assets/test/controller/action.test.js b/src/LiveComponent/assets/test/controller/action.test.js
index 0f4c7679c8d..925d8daedd7 100644
--- a/src/LiveComponent/assets/test/controller/action.test.js
+++ b/src/LiveComponent/assets/test/controller/action.test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 import { clearDOM } from '@symfony/stimulus-testing';
-import { startStimulus } from '../tools';
+import { initLiveComponent, startStimulus } from '../tools';
 import { getByLabelText, getByText, waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock-jest';
@@ -18,8 +18,7 @@ import fetchMock from 'fetch-mock-jest';
 describe('LiveController Action Tests', () => {
     const template = (data) => `
         <div
-            data-controller="live"
-            data-live-url-value="http://localhost/_components/my_component"
+            ${initLiveComponent('/_components/my_component', data)}
         >
             <label>
                 Comments:
@@ -46,10 +45,7 @@ describe('LiveController Action Tests', () => {
 
     it('Sends an action and cancels any re-renders', async () => {
         const data = { comments: 'hi' };
-        const { element } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element } = await startStimulus(template(data));
 
         // ONLY a post is sent, not a re-render GET
         const postMock = fetchMock.postOnce('http://localhost/_components/my_component/save', {
diff --git a/src/LiveComponent/assets/test/controller/basic.test.js b/src/LiveComponent/assets/test/controller/basic.test.js
index 80d695b592b..473b2062d4d 100644
--- a/src/LiveComponent/assets/test/controller/basic.test.js
+++ b/src/LiveComponent/assets/test/controller/basic.test.js
@@ -26,7 +26,6 @@ describe('LiveController Basic Tests', () => {
         })
         const { element } = await startStimulus(
             '<div data-controller="live"></div>',
-            {},
             container
         );
 
diff --git a/src/LiveComponent/assets/test/controller/child.test.js b/src/LiveComponent/assets/test/controller/child.test.js
new file mode 100644
index 00000000000..ad555e209a6
--- /dev/null
+++ b/src/LiveComponent/assets/test/controller/child.test.js
@@ -0,0 +1,192 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+import { clearDOM } from '@symfony/stimulus-testing';
+import { initLiveComponent, mockRerender, startStimulus } from '../tools';
+import { getByLabelText, getByText, waitFor } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock-jest';
+
+describe('LiveController parent -> child component tests', () => {
+    const parentTemplate = (data) => {
+        const errors = data.errors || { post: {} };
+
+        return `
+            <div
+                ${initLiveComponent('/_components/parent', data)}
+            >
+                <span>Title: ${data.post.title}</span>
+                <span>Description in Parent: ${data.post.content}</span>
+
+                <label>
+                    Title:
+                    <input
+                        type="text"
+                        name="post[title]"
+                        value="${data.post.title}"
+                        data-action="live#update"
+                    >
+                </label>
+
+                ${childTemplate({ value: data.post.content, error: errors.post.content })}
+
+                <button
+                    data-action="live#$render"
+                >Parent Re-render</button>
+            </div>
+        `
+    }
+
+    const childTemplate = (data) => `
+        <div
+            ${initLiveComponent('/_components/child', data)}
+        >
+            <label>
+                Content:
+                <textarea
+                    data-model="value"
+                    name="post[content]"
+                    data-action="live#update"
+                    rows="${data.rows ? data.rows : '3'}"
+                >${data.value}</textarea>
+            </label>
+
+            <div>Value in child: ${data.value}</div>
+            <div>Error in child: ${data.error ? data.error : 'none'}</div>
+            {# Rows represents a writable prop that's private to the child component #}
+            <div>Rows in child: ${data.rows ? data.rows : 'not set'}</div>
+
+            <button
+                data-action="live#$render"
+            >Child Re-render</button>
+        </div>
+    `;
+
+    afterEach(() => {
+        clearDOM();
+        fetchMock.reset();
+    });
+
+    it('renders parent component without affecting child component', async () => {
+        const data = { post: { title: 'Parent component', content: 'i love' } };
+        const { element } = await startStimulus(parentTemplate(data));
+
+        // on child re-render, expect the new value, change rows on the server
+        mockRerender({ value: 'i love popcorn' }, childTemplate, (data) => {
+            // change the "rows" data on the "server"
+            data.rows = 5;
+        });
+        await userEvent.type(getByLabelText(element, 'Content:'), ' popcorn');
+
+        await waitFor(() => expect(element).toHaveTextContent('Value in child: i love popcorn'));
+        expect(element).toHaveTextContent('Rows in child: 5');
+
+        // when the parent re-renders, expect the changed title AND content (from child)
+        // but, importantly, the only "changed" data that will be passed into
+        // the child component will be "content", which will match what the
+        // child already has. This will NOT trigger a re-render.
+        mockRerender(
+            { post: { title: 'Parent component changed', content: 'i love popcorn' } },
+            parentTemplate
+        )
+        await userEvent.type(getByLabelText(element, 'Title:'), ' changed');
+        await waitFor(() => expect(element).toHaveTextContent('Title: Parent component changed'));
+
+        // the child component should *not* have updated
+        expect(element).toHaveTextContent('Rows in child: 5');
+    });
+
+    it('updates child model and parent model in a deferred way', async () => {
+        const data = { post: { title: 'Parent component', content: 'i love' } };
+        const { element, controller } = await startStimulus(parentTemplate(data));
+
+        // verify the child request contains the correct description & re-render
+        mockRerender({ value: 'i love turtles' }, childTemplate);
+
+        // change the description in the child
+        const inputElement = getByLabelText(element, 'Content:');
+        await userEvent.type(inputElement, ' turtles');
+
+        // wait for the render to complete
+        await waitFor(() => expect(element).toHaveTextContent('Value in child: i love turtles'));
+
+        // the parent should not re-render
+        expect(element).not.toHaveTextContent('Content in parent: i love turtles');
+        // but the value DID update on the parent component
+        // this is because the name="post[content]" in the child matches the parent model
+        expect(controller.dataValue.post.content).toEqual('i love turtles');
+    });
+
+    it('updates re-renders a child component if data has changed from initial', async () => {
+        const data = { post: { title: 'Parent component', content: 'initial content' } };
+        const { element } = await startStimulus(parentTemplate(data));
+
+        // allow the child to re-render, but change the "rows" value
+        const inputElement = getByLabelText(element, 'Content:');
+        await userEvent.clear(inputElement);
+        await userEvent.type(inputElement, 'changed content');
+        mockRerender({'value': 'changed content'}, childTemplate, (data) => {
+            data.rows = 5;
+        });
+
+        // reload, which will give us rows=5
+        getByText(element, 'Child Re-render').click();
+        await waitFor(() => expect(element).toHaveTextContent('Rows in child: 5'));
+
+        // simulate an action in the parent component where "errors" changes
+        mockRerender({'post': { title: 'Parent component', content: 'changed content' }}, parentTemplate, (data) => {
+            data.post.title = 'Changed title';
+            data.errors = { post: { content: 'the content is not interesting enough' }};
+        });
+
+        getByText(element, 'Parent Re-render').click();
+        await waitFor(() => expect(element).toHaveTextContent('Title: Changed title'));
+        // the child, of course, still has the "changed content" value
+        expect(element).toHaveTextContent('Value in child: changed content');
+        // but because some child data *changed* from its original value, the child DOES re-render
+        expect(element).toHaveTextContent('Error in child: the content is not interesting enough');
+        // however, this means that the updated "rows" data on the child is lost
+        expect(element).toHaveTextContent('Rows in child: not set');
+    });
+
+    it('uses data-model-map to map child models to parent models', async () => {
+        const parentTemplateDifferentModel = (data) => `
+            <div
+                ${initLiveComponent('/_components/parent', data)}
+            >
+                <span>Parent textarea content: ${data.textareaContent}</span>
+
+                <div
+                    data-model-map="from(value)|textareaContent"
+                >
+                    ${childTemplate({ value: data.textareaContent, error: null })}
+                </div>
+
+                <button
+                    data-action="live#$render"
+                >Parent Re-render</button>
+            </div>
+        `;
+
+        const data = { textareaContent: 'Original content' };
+        const { element, controller } = await startStimulus(parentTemplateDifferentModel(data));
+
+        // update & re-render the child component
+        const inputElement = getByLabelText(element, 'Content:');
+        await userEvent.clear(inputElement);
+        await userEvent.type(inputElement, 'changed content');
+        mockRerender({value: 'changed content'}, childTemplate);
+
+        await waitFor(() => expect(element).toHaveTextContent('Value in child: changed content'));
+
+        expect(controller.dataValue).toEqual({ textareaContent: 'changed content' });
+   });
+});
diff --git a/src/LiveComponent/assets/test/controller/csrf.test.js b/src/LiveComponent/assets/test/controller/csrf.test.js
index 4ee575179a4..2283dd56b51 100644
--- a/src/LiveComponent/assets/test/controller/csrf.test.js
+++ b/src/LiveComponent/assets/test/controller/csrf.test.js
@@ -10,15 +10,14 @@
 'use strict';
 
 import { clearDOM } from '@symfony/stimulus-testing';
-import { startStimulus } from '../tools';
-import { getByLabelText, getByText, waitFor } from '@testing-library/dom';
+import { initLiveComponent, startStimulus } from '../tools';
+import { getByText, waitFor } from '@testing-library/dom';
 import fetchMock from 'fetch-mock-jest';
 
 describe('LiveController CSRF Tests', () => {
     const template = (data) => `
         <div
-            data-controller="live"
-            data-live-url-value="http://localhost/_components/my_component"
+            ${initLiveComponent('/_components/my_component', data)}
             data-live-csrf-value="123TOKEN"
         >
             <label>
@@ -46,10 +45,7 @@ describe('LiveController CSRF Tests', () => {
 
     it('Sends the CSRF token on an action', async () => {
         const data = { comments: 'hi' };
-        const { element } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element } = await startStimulus(template(data));
 
         const postMock = fetchMock.postOnce('http://localhost/_components/my_component/save', {
             html: template({ comments: 'hi', isSaved: true }),
diff --git a/src/LiveComponent/assets/test/controller/model.test.js b/src/LiveComponent/assets/test/controller/model.test.js
index b5256da3722..7ca1884f624 100644
--- a/src/LiveComponent/assets/test/controller/model.test.js
+++ b/src/LiveComponent/assets/test/controller/model.test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 import { clearDOM } from '@symfony/stimulus-testing';
-import { startStimulus } from '../tools';
+import { initLiveComponent, mockRerender, startStimulus } from '../tools';
 import { getByLabelText, waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock-jest';
@@ -18,8 +18,7 @@ import fetchMock from 'fetch-mock-jest';
 describe('LiveController data-model Tests', () => {
     const template = (data) => `
         <div
-            data-controller="live"
-            data-live-url-value="http://localhost"
+            ${initLiveComponent('/_components/my_component', data)}
         >
             <label>
             Name:
@@ -39,12 +38,9 @@ describe('LiveController data-model Tests', () => {
 
     it('renders correctly with data-model and live#update', async () => {
         const data = { name: 'Ryan' };
-        const { element, controller } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element, controller } = await startStimulus(template(data));
 
-        fetchMock.getOnce('http://localhost/?name=Ryan+WEAVER', {
+        fetchMock.getOnce('end:?name=Ryan+WEAVER', {
             html: template({ name: 'Ryan Weaver' }),
             data: { name: 'Ryan Weaver' }
         });
@@ -67,10 +63,7 @@ describe('LiveController data-model Tests', () => {
 
     it('correctly only uses the most recent render call results', async () => {
         const data = { name: 'Ryan' };
-        const { element, controller } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element, controller } = await startStimulus(template(data));
 
         let renderCount = 0;
         element.addEventListener('live:render', () => {
@@ -83,7 +76,7 @@ describe('LiveController data-model Tests', () => {
             ['guy', 150]
         ];
         requests.forEach(([string, delay]) => {
-            fetchMock.getOnce(`http://localhost/?name=Ryan${string}`, {
+            fetchMock.getOnce(`end:my_component?name=Ryan${string}`, {
                 // the _ at the end helps us look that the input has changed
                 // as a result of a re-render (not just from typing in the input)
                 html: template({ name: `Ryan${string}_` }),
@@ -114,19 +107,15 @@ describe('LiveController data-model Tests', () => {
 
     it('falls back to using the name attribute when no data-model is present', async () => {
         const data = { name: 'Ryan' };
-        const { element, controller } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element, controller } = await startStimulus(template(data));
 
         // replace data-model with name attribute
         const inputElement = getByLabelText(element, 'Name:');
         delete inputElement.dataset.model;
         inputElement.setAttribute('name', 'name');
 
-        fetchMock.getOnce('http://localhost/?name=Ryan+WEAVER', {
-            html: template({ name: 'Ryan Weaver' }),
-            data: { name: 'Ryan Weaver' }
+        mockRerender({name: 'Ryan WEAVER'}, template, (data) => {
+            data.name = 'Ryan Weaver';
         });
 
         await userEvent.type(inputElement, ' WEAVER');
@@ -138,11 +127,31 @@ describe('LiveController data-model Tests', () => {
         fetchMock.done();
     });
 
+    it('uses data-model when both name and data-model is present', async () => {
+        const data = { name: 'Ryan' };
+        const { element, controller } = await startStimulus(template(data));
+
+        // give element data-model="name" and name="first_name"
+        const inputElement = getByLabelText(element, 'Name:');
+        inputElement.setAttribute('name', 'first_name');
+
+        // ?name should be what's sent to the server
+        mockRerender({name: 'Ryan WEAVER'}, template, (data) => {
+            data.name = 'Ryan Weaver';
+        })
+
+        await userEvent.type(inputElement, ' WEAVER');
+
+        await waitFor(() => expect(inputElement).toHaveValue('Ryan Weaver'));
+        expect(controller.dataValue).toEqual({name: 'Ryan Weaver'});
+
+        fetchMock.done();
+    });
+
     it('standardizes user[firstName] style models into post.name', async () => {
         const deeperModelTemplate = (data) => `
             <div
-                data-controller="live"
-                data-live-url-value="http://localhost"
+                ${initLiveComponent('/_components/my_component', data)}
             >
                 <label>
                 First Name:
@@ -155,18 +164,14 @@ describe('LiveController data-model Tests', () => {
             </div>
         `;
         const data = { user: { firstName: 'Ryan' } };
-        const { element, controller } = await startStimulus(
-            deeperModelTemplate(data),
-            data
-        );
+        const { element, controller } = await startStimulus(deeperModelTemplate(data));
 
         // replace data-model with name attribute
         const inputElement = getByLabelText(element, 'First Name:');
 
         const newData = { user: { firstName: 'Ryan Weaver' } };
-        fetchMock.getOnce('http://localhost/?user%5BfirstName%5D=Ryan+WEAVER', {
-            html: deeperModelTemplate(newData),
-            data: newData
+        mockRerender({'user': {firstName: 'Ryan WEAVER'}}, deeperModelTemplate, (data) => {
+            data.user.firstName = 'Ryan Weaver';
         });
 
         await userEvent.type(inputElement, ' WEAVER');
@@ -181,8 +186,7 @@ describe('LiveController data-model Tests', () => {
     it('updates correctly when live#update is on a parent element', async () => {
         const parentUpdateTemplate = (data) => `
             <div
-                data-controller="live"
-                data-live-url-value="http://localhost"
+                ${initLiveComponent('/_components/my_component', data)}
             >
                 <div data-action="input->live#update">
                     <label>
@@ -197,14 +201,10 @@ describe('LiveController data-model Tests', () => {
         `;
 
         const data = { firstName: 'Ryan' };
-        const { element, controller } = await startStimulus(
-            parentUpdateTemplate(data),
-            data
-        );
-
-        fetchMock.getOnce('http://localhost/?firstName=Ryan+WEAVER', {
-            html: parentUpdateTemplate({ firstName: 'Ryan Weaver' }),
-            data: { firstName: 'Ryan Weaver' }
+        const { element } = await startStimulus(parentUpdateTemplate(data));
+
+        mockRerender({firstName: 'Ryan WEAVER'}, parentUpdateTemplate, (data) => {
+            data.firstName = 'Ryan Weaver';
         });
 
         const inputElement = getByLabelText(element, 'Name:');
@@ -221,14 +221,10 @@ describe('LiveController data-model Tests', () => {
     it('tracks which fields should be modified, sends, without forgetting previous fields', async () => {
         // start with one other field in validatedFields
         const data = { name: 'Ryan', validatedFields: ['otherField'] };
-        const { element, controller } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element } = await startStimulus(template(data));
 
-        fetchMock.getOnce('http://localhost/?name=Ryan+WEAVER&validatedFields%5B0%5D=otherField&validatedFields%5B1%5D=name', {
-            html: template({ name: 'Ryan Weaver' }),
-            data: { name: 'Ryan Weaver' }
+        mockRerender({name: 'Ryan WEAVER', validatedFields: ['otherField', 'name']}, template, (data) => {
+            data.name = 'Ryan Weaver';
         });
 
         const inputElement = getByLabelText(element, 'Name:');
@@ -239,7 +235,4 @@ describe('LiveController data-model Tests', () => {
         // assert all calls were done the correct number of times
         fetchMock.done();
     });
-
-    // TODO - test changing debounce
-    // TODO - test deferred rendering
 });
diff --git a/src/LiveComponent/assets/test/controller/render.test.js b/src/LiveComponent/assets/test/controller/render.test.js
index 9bb381c6f9f..742da46cb26 100644
--- a/src/LiveComponent/assets/test/controller/render.test.js
+++ b/src/LiveComponent/assets/test/controller/render.test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 import { clearDOM } from '@symfony/stimulus-testing';
-import { startStimulus } from '../tools';
+import { initLiveComponent, mockRerender, startStimulus } from '../tools';
 import { createEvent, fireEvent, getByLabelText, getByText, waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock-jest';
@@ -18,8 +18,7 @@ import fetchMock from 'fetch-mock-jest';
 describe('LiveController rendering Tests', () => {
     const template = (data, includeLoading = false) => `
         <div
-            data-controller="live"
-            data-live-url-value="http://localhost/_components/my_component"
+            ${initLiveComponent('/_components/my_component', data)}
         >
             <!-- form field not mapped with data-model -->
             <label>
@@ -46,27 +45,21 @@ describe('LiveController rendering Tests', () => {
 
     it('renders from the AJAX endpoint & updates data', async () => {
         const data = { name: 'Ryan' };
-        const { element, controller } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element, controller } = await startStimulus(template(data));
 
-        fetchMock.get('http://localhost/_components/my_component?name=Ryan', {
-            html: '<div>aloha!</div>',
-            data: { name: 'Kevin' }
+        mockRerender({ name: 'Ryan' }, template, (data) => {
+            // change the data on the server
+            data.name = 'Kevin';
         });
         getByText(element, 'Reload').click();
 
-        await waitFor(() => expect(element).toHaveTextContent('aloha!'));
+        await waitFor(() => expect(element).toHaveTextContent('Name: Kevin'));
         expect(controller.dataValue).toEqual({name: 'Kevin'});
     });
 
     it('conserves values of fields modified after a render request', async () => {
         const data = { name: 'Ryan' };
-        const { element } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element } = await startStimulus(template(data));
 
         fetchMock.get('http://localhost/_components/my_component?name=Ryan', {
             html: template({ name: 'Kevin' }),
@@ -88,8 +81,7 @@ describe('LiveController rendering Tests', () => {
             // "true" gives the comment input a loading behavior
             // this could make the input.isEqualNode() be false when comparing
             // that's exactly what we want test for
-            template(data, true),
-            data
+            template(data, true)
         );
 
         fetchMock.get('http://localhost/_components/my_component?name=Ryan', {
@@ -106,64 +98,11 @@ describe('LiveController rendering Tests', () => {
         expect(document.activeElement.name).toEqual('comments');
     });
 
-    it('avoids updating a child component', async () => {
-        const parentTemplate = (data, childData) => {
-            return `
-                <div
-                    data-controller="live"
-                    data-live-url-value="http://localhost/_components/parent"
-                >
-                    Title: ${data.title}
-
-                    <button
-                        data-action="live#$render"
-                    >Parent Re-render</button>
-
-                    ${template(childData)}
-                </div>
-            `
-        }
-
-        const data = { title: 'Parent component' };
-        const childData = { name: 'Ryan' };
-        const { element } = await startStimulus(
-            // render the parent and child component
-            parentTemplate(data, childData),
-            data
-        );
-        // setup the values on the child element
-        element.querySelector('[data-controller="live"]').dataset.liveDataValue = JSON.stringify(childData);
-
-        // child re-render: render with new name & an error class
-        fetchMock.get('http://localhost/_components/my_component?name=Ryan', {
-            html: template({ name: 'Kevin', hasError: true }),
-            data: { name: 'Kevin', hasError: true }
-        });
-
-        // reload the child template
-        getByText(element, 'Reload').click();
-        await waitFor(() => expect(element).toHaveTextContent('Name: Kevin'));
-
-        // reload the parent template
-        fetchMock.get('http://localhost/_components/parent?title=Parent+component', {
-            html: parentTemplate({ title: 'Changed parent' }, { name: 'changed name'}),
-            data: { title: 'Changed parent'}
-        });
-        getByText(element, 'Parent Re-render').click();
-        await waitFor(() => expect(element).toHaveTextContent('Title: Changed parent'));
-
-        // the child component should *not* have updated
-        expect(element).toHaveTextContent('Name: Kevin');
-    });
-
     it('cancels a re-render if the page is navigating away', async () => {
         const data = { name: 'Ryan' };
-        const { element, controller } = await startStimulus(
-            template(data),
-            data
-        );
+        const { element } = await startStimulus(template(data));
 
-        fetchMock.get('http://localhost/_components/my_component?name=Ryan', {
+        fetchMock.get('end:?name=Ryan', {
             html: '<div>aloha!</div>',
             data: { name: 'Kevin' }
         }, {
@@ -174,7 +113,7 @@ describe('LiveController rendering Tests', () => {
         // imitate navigating away
         fireEvent(window, createEvent('beforeunload', window));
 
-        // wait for the fetch to fonish
+        // wait for the fetch to finish
         await fetchMock.flush();
 
         // the re-render should not have happened
diff --git a/src/LiveComponent/assets/test/have_rendered_values_changed.test.js b/src/LiveComponent/assets/test/have_rendered_values_changed.test.js
new file mode 100644
index 00000000000..be5b9b6f9e9
--- /dev/null
+++ b/src/LiveComponent/assets/test/have_rendered_values_changed.test.js
@@ -0,0 +1,93 @@
+import { haveRenderedValuesChanged } from '../src/have_rendered_values_changed';
+
+const runTest = (originalData, currentData, newData, expected) => {
+    const result = haveRenderedValuesChanged(
+        JSON.stringify(originalData),
+        JSON.stringify(currentData),
+        JSON.stringify(newData),
+    );
+
+    expect(result).toBe(expected);
+};
+
+describe('haveRenderedValuesChanged', () => {
+    it('returns false if the "new" data matches the "original" data', () => {
+        runTest(
+            // original
+            { value: 'original' },
+            // current
+            { value: 'child component did change' },
+            // new
+            { value: 'original' },
+            false
+        );
+    });
+
+    it('returns false if the "new" data matches the "current" data', () => {
+        // in this case, the component is already aware of the data
+
+        runTest(
+            // original
+            { value: 'original' },
+            // current
+            { value: 'updated' },
+            // new
+            { value: 'updated' },
+            false
+        );
+    });
+
+    it('returns false if the new data that *has* changed vs original is equal to current data', () => {
+        // This is a combination of the first two cases - each key
+        // represents one of the first two test situations.
+
+        // we see that the "firstName" key has changed between the
+        // new data vs the original. But, we also see that "firstName"
+        // is equal between new & current, meaning the component is already
+        // aware of this change.
+
+        // the "lastName" key has changed between current and new, but we
+        // don't care, because this hasn't changed since the original render
+
+        runTest(
+            // original
+            { firstName: 'Beckett', lastName: 'Weaver' },
+            // current
+            { firstName: 'Ryan', lastName: 'Pelham' },
+            // new
+            { firstName: 'Ryan', lastName: 'Weaver' },
+            false
+        );
+    });
+
+    it('returns true correctly even with rearranged key', () => {
+        // same as previous case, but keys rearranged
+
+        runTest(
+            // original
+            { firstName: 'Beckett', lastName: 'Weaver', favoriteColor: 'orange' },
+            // current
+            { firstName: 'Beckett', favoriteColor: 'orange', lastName: 'Weaver' },
+            // new
+            { favoriteColor: 'orange', lastName: 'Weaver', firstName: 'Beckett' },
+            false
+        );
+    });
+
+    it('returns true if at least one key in the new data has changed since the original data *and* it is not equal to the current data', () => {
+        // something truly changed in how the component is rendered that
+        // the component isn't aware of yet
+
+        runTest(
+            // original
+            { firstName: 'Beckett', lastName: 'Weaver', error: null },
+            // current
+            { firstName: 'Ryan', lastName: 'Pelham', error: null },
+            // new
+            { firstName: 'Ryan', lastName: 'Weaver', error: 'That sounds like a fake name' },
+            true
+        );
+    });
+
+    // todo - test with missing keys
+});
diff --git a/src/LiveComponent/assets/test/tools.js b/src/LiveComponent/assets/test/tools.js
index b4ed54d9c0a..eb523fd0d7d 100644
--- a/src/LiveComponent/assets/test/tools.js
+++ b/src/LiveComponent/assets/test/tools.js
@@ -1,6 +1,8 @@
 import { Application } from 'stimulus';
 import LiveController from '../src/live_controller';
 import { waitFor } from '@testing-library/dom';
+import fetchMock from 'fetch-mock-jest';
+import { buildSearchParams } from '../src/http_data_helper';
 
 const TestData = class {
     constructor(controller, element) {
@@ -11,7 +13,7 @@ const TestData = class {
 
 let application;
 
-const startStimulus = async (html, data, container = null) => {
+const startStimulus = async (html, container = null) => {
     // start the Stimulus app just once per test suite
     if (!application) {
         application = Application.start();
@@ -26,8 +28,6 @@ const startStimulus = async (html, data, container = null) => {
     document.body.appendChild(container);
 
     const element = getControllerElement(container);
-    element.dataset.liveDataValue = JSON.stringify(data);
-
     await waitFor(() => application.getControllerForElementAndIdentifier(element, 'live'));
     const controller = application.getControllerForElementAndIdentifier(element, 'live');
 
@@ -38,4 +38,44 @@ const getControllerElement = (container) => {
     return container.querySelector('[data-controller="live"]');
 };
 
-export { startStimulus, getControllerElement };
+const dataToJsonAttribute = (data) => {
+    const container = document.createElement('div');
+    container.dataset.foo = JSON.stringify(data);
+
+    // returns the now-escaped string, ready to be used in an HTML attribute
+    return container.outerHTML.match(/data\-foo="(.+)\"/)[1]
+}
+
+const initLiveComponent = (url, data) => {
+    return `
+        data-controller="live"
+        data-live-url-value="http://localhost${url}"
+        data-live-data-value="${dataToJsonAttribute(data)}"
+    `;
+}
+
+/**
+ * Allows you to easily mock a re-render Ajax request.
+ *
+ * The renderCallback() is called and passed the "sentData" as the only
+ * argument. If you want to change the "sentData" slightly before the
+ * template is rendered, pass the changeDataCallback and modify it there.
+ *
+ * @param {Object} sentData The *expected* data that should be sent to the server
+ * @param {function} renderCallback Function that will render the component
+ * @param {function} changeDataCallback Specify if you want to change the data before rendering
+ */
+const mockRerender = (sentData, renderCallback, changeDataCallback = (data) => {}) => {
+    const params = new URLSearchParams('');
+
+    const url = `end:?${buildSearchParams(params, sentData).toString()}`;
+
+    changeDataCallback(sentData);
+
+    fetchMock.mock(url, {
+        html: renderCallback(sentData),
+        data: sentData
+    });
+}
+
+export { startStimulus, getControllerElement, initLiveComponent, mockRerender };
diff --git a/src/TwigComponent/README.md b/src/TwigComponent/README.md
index 2407aa8ac14..65477c4eef1 100644
--- a/src/TwigComponent/README.md
+++ b/src/TwigComponent/README.md
@@ -324,6 +324,14 @@ class FeaturedProductsComponent
 }
 ```
 
+## Embedded Components
+
+It's totally possible to embed one component into another. When you do
+this, there's nothing special to know: both components render independently.
+If you're using [Live Components](https://github.com/symfony/ux-live-component),
+then there _are_ some guidelines related to how the re-rendering of parent
+and child components works. Read [Live Embedded Components](https://github.com/symfony/ux-live-component#embedded-components).
+
 ## Contributing
 
 Interested in contributing? Visit the main source for this repository: