Show div even if empty

I use Vuejs and have a component with div container which collapses if it's empty.

<template>
  <div>{{ content }}</div>
</template>

<script>
export default {
  name: "myComponent",
  props: {
    content: String
  }
};
</script>

When consuming this component I could go for

<MyComponent content="text to show" />

but what if I want it to be empty? Then the div takes no space and collapses. I want to prevent it.

<!-- This one takes no space -->
<div></div>
<div>This one takes space</div>

I thought about passing a unicode

https://www.compart.com/de/unicode/U+2800

div {
  background: red;
  margin: 20px;
}

<div>&#10240;</div>
<div>This one takes space</div>

but the component does not convert it to a unicode character when receiving a string as a parameter.

Is there a solution using CSS instead of a unicode character?

I created a small example to show the current problem

https://codesandbox.io/s/o5l1kl290y

You could add a non-breaking space (Unicode symbol U+00A0) as the content of a pseudoelement only for :empty divs (and an empty string as alternative text for ATs)

div:empty::before {
   content: "\A0" / "";
}

div { border: 1px #ccc solid; }

<div></div>

or you could set a specific min-height to div:empty