title: Detect Vue component' slot position and size changes
body: <p>I have a component which receive named slots:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Child&gt;
      &lt;template #content&gt;
          &lt;p&gt;tooltip content&lt;/p&gt;
      &lt;/template&gt;
      &lt;template #activator&gt;
          &lt;button&gt;hover me&lt;/button&gt;
      &lt;/template&gt;
  &lt;/Child&gt;
  </code></pre>
  <p>I wanna know the position and size of the activator slot no matter where I'm gonna use it and what I'm gonna do with it. If I do like this:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div style=&quot;margin-top: 13px;&quot; :style=&quot;styleObject&quot;&gt;
          &lt;Child&gt;
              &lt;template #content&gt;
                  &lt;p&gt;tooltip content&lt;/p&gt;
              &lt;/template&gt;
              &lt;template #activator&gt;
                  &lt;button&gt;hover me&lt;/button&gt;
              &lt;/template&gt;
          &lt;/Child&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup lang=&quot;ts&quot;&gt;
  import {reactive, ref} from &quot;vue&quot;;
  import Child from &quot;./components/Child.vue&quot;;
  
  const styleObject = reactive({
      marginLeft: '16px'
  })
  
  setTimeout(() =&gt; {
      styleObject.marginLeft = '30px'
  }, 2000)
  &lt;/script&gt;
  </code></pre>
  <p>Inside <code>&lt;Child&gt;</code> component I want to detect position changed after 2 seconds. I was able to get initial position and size with this:</p>
  <pre class="lang-js prettyprint-override"><code>const slots = useSlots()
  
  const activatorStyles = reactive({
      top: 0,
      left: 0,
      height: 0,
      width: 0
  })
  
  const getActivatorStyles = () =&gt; {
      if (slots?.activator) {
          activatorStyles.top = slots.activator()[0]?.el?.offsetTop
          activatorStyles.left = slots.activator()[0]?.el?.offsetLeft
          activatorStyles.height = slots.activator()[0]?.el?.offsetHeight
          activatorStyles.width = slots.activator()[0]?.el?.offsetWidth
          console.log('activatorStyles', activatorStyles)
      }
  }
  
  onUpdated(getActivatorStyles)
  onMounted(getActivatorStyles)
  </code></pre>
  <p>but I'm not sure how to detect that in any of the parent components something changed which resulted in this <code>&lt;Child&gt;</code> component position or size change. For example this timeout from snippet above.</p>
  <p>I was trying onUpdate but this seems to be working only on DOM Nodes changes (not styles). I was also trying to make this object as a computed property but no luck. <a href="https://sfc.vuejs.org/#eNqVU8GOmzAQ/ZUpPYRIAbKt1ANLEq320kOrHnarHkoPJDGBCLBlD9mtIv69YxtIQoiUcsH2zHtvPPN8dJ6E8A81c0InQlaKIkG2jCugL9rmB1D4t2CL2CkTucsrD7kI4eGzeH+MHQi7oPn/WO/ZBmOnRRuG5ywvtmcH5rCTgY8bXiGrcJBgksQSOS8wF9AmRYEYEgWDgkcUkg3mhwS5HNNY14i8Wmb8wCSULAragztkouD8alFAraL1RSpt1UbmAkExrAUUSbWjXqEyLcpLwSXCUTJTIpuBZGkDqeQlxA4NJHYe+yyj1cV8K62HZnLiijqkSOU0BFgQm+V1j7ZEO79vLMUQJg9fxPskrpqpRlN1r3nJeI2uO4XFElrEGZ9/QhP15NN8bvEzoOWcWKLAXpUu5swcW7VXJsLfK16RtQxl3AaoAWEn0l41pEWGKFQYBCrd6Lvtlc/lLqCVL+sKqUKfqdJbS/6mmCTi2NEUDZVBkn1LrnwcffA8gNfWTM/WTACeZ6Oq4AhVUmobt04jZwcj0KfOSuPg3mknuJBseTz2gRfdUNU05GQKDNzyf16pFXshbTUDXn3n1B621cufYkts2ysb9RbRGJpgB3eNAWxsUOaIhczbn8/spjBO6nYZy3fZ2f4t32JG285jVmLHsG9ir3LhuTwF1xS58vt6pl1Qf4MqfaqJOAzkhHCnv+d/Vj4rVj5PU+1vLm5T6JvcwaHNf5vENuAOmq8m8TaR6dwdPL903olGN5gXzC/4zp0MOCezoQrNRIP029HT6Y3jXk+IUnuLjYcvX3/zD5Y8Gk8=" rel="nofollow noreferrer">Here is vue playground</a> where initial size and position is correctly gathered but after timeout execution it doesn't detect that <code>left</code> changed and it stays <code>24</code>.</p>
  <p>My question is how can I can keep my <code>activatorStyles</code> object up-to-date no matter what will happen in parent components?</p>
  <hr>
  <p><strong>EDIT:</strong> I tried MutationObserver on parent but problem is that I don't know from where the changes of position / size might come. If I observer <code>parentElement</code> as suggested it works very well if the styles binding are on direct parent. If you I have more <code>&lt;div&gt;</code> nested and style binding is happening somewhere deeper the mutationObserver is not triggering anymore. To make it work I would need to pass <code>document.body</code> to observer which is not best performance, isn't it? <a href="https://sfc.vuejs.org/#eNqVVUtvm0AQ/isbejCWDDit1AMhjqKoUg+JckiqHkoPGIZHCuxqd8hDlv97Z3cBvyuXg9nd2e+b1zd45dwK4b924IROhNCIOkFYxC2jJ8qqV6bwo4br2GkSWVSth1yE7PKLeL+KHRYORvN+XL5AirHToy1+3ND2rqzqbOvAHA4+2aeUtwgt7l0wl8QCOa+xEqy/FAVinyjYi/6IhyTF6jVBLo/5WHaIvF2U/BUkayAK+oMz3ETBbmpRsMl8WO8AaatSWQlkCrATrE7agsqIylSvagSXyFYSTMAwYxLyNcslb1jsUK9i52q8ZTwPNt8Govtp7sQt1UuRl01/2DWxWV53ZUO0rb2HHEM2ufwq3idxu55qNEX3XDXAO3TdKbtesB6xxedv0EQ9+TyfW/yM0XJOLFFgU6XEnJljo/aaRPgvirekOkMZ9wYqQDg46VMNaVEiChUGgcpTnduL8rksAlr5smuRIvRBNd5S8jcFkohjZ7bFEdAhNdWT0GYgQf6Lc+/qAa+mXVN6lMpY6oPRiS48j7HnXrJ3VrKMeZ61qpoja5NGT06vZxqm4Aj0dhDscfCo5w1cSFisVqPhSTdKrdc0L2TYU+H/abBT8ES+1Yzx9oFT2SHTyx8iI7bsQJ6j9DSGlDHAXSMsa9sL84g0zedm3jezNgoddiVURbm1f6syLGk7aNe6SJO6XibpH+LeUrC28Rr8mhfuRPEGsKzagqUl1QAusgkRUJMHjgJwbMQY6c48VDlzTaI3/pjTdDDqZy9Tn/IiDgPZINzpr/nvGx/qG5/nuZ49Lk5T6GqcwaEH8zSJLeIZNN/NxdNEpvpn8PzU9zY0O40YUReWdDI7SeeLhEYUv9XQ0IvaZemoZzRnAzEyvrTzTIG18MYeOkyw4u1jf+wO6phqwe4g6TevCsKtWIIoK/ozABUylB2NQqon/75SpD57oLolSgC7ZWti6+PBIQK/X7gZTzsds7/k2QdRGT9GsBqgPy16Pc6Veyg+ujxO4HHz7kd3/RdHTKII" rel="nofollow noreferrer">playground example</a>?</p>