Quick help on Vue component

I have a simple vue application that consists of a few components including a sidebar, topbar and content (iframe).

The sidebar opens and closes using a toggle button, which dynamically changes the elements class:

const is_expanded = ref(localStorage.getItem("is_expanded") === "true")
const ToggleMenu = () => {
is_expanded.value = !is_expanded.value
// @ts-ignore
localStorage.setItem("is_expanded", is_expanded.value)
}

......

<template>
<aside :class="`${is_expanded ? 'is-expanded' : ''}`">
<div class="logo">
<img :src="logoURL" alt="Vue" />
</div>

<div class="menu-toggle-wrap">
<button class="menu-toggle" @click="ToggleMenu">
<span class="material-icons">keyboard_double_arrow_right</span>
</button>
</div>
.........

In the middle of the screen I have an iframe/content component which currently has a fixed margin-left so that it starts where the expanded sidebar ends, however I would like it to be dynamic and re-size when the sidebar is closed.

Is there a way I can us the is_expanded variable from the sidebar component to also dynamically update the iframe class in the same way that it does to the sidebar class?

My project uses Vue, Vite and SCSS