bug: modal should not add another ion-page class if one is already provided by the user

# Feature Request

**Ionic version:**

[x] **5.x**

**Describe the Feature Request**
When using modalController and passing a custom component, the ion-modal that the modalController creates automatically has an ion-page element inside of it. If the custom component uses ion-page as its root element, there are two ion-page elements inside of the modal.

This default behavior is bad for a couple of reasons:
1. Vue components that are used inside of modals may end up being reused as regular content pages. There are plenty of cases where this happens in our app. So either we leave `` as the parent in these components and you end up having two `` elements embedded when the component is used as a modal, or we write some hacky logic to determine whether or not the component has been placed inside of a modal and remove the ion-page parent when so.
2. Not all use cases of ion-modal will see ion-page as the root parent inside the modal. For example, you may need routing inside of a modal in which case ion-nav should be the immediate child of the ion-modal and ion-page will be inside of the ion-nav.

**Describe Preferred Solution**
Either remove the ion-page automatically generated inside of ion-modal completely and let the custom component decide when and where to place the page, or only add ion-page if the root element of the custom component isn't already an ion-page or ion-nav.

**Reproduction**
https://github.com/Giwayume/ion-vue-modal-page-bug

**Related Code**

some-component.vue
```

Hello World

```

modal-creator.ts
```
import { defineAsyncComponent } from 'vue';
import { modalController } from '@ionic/vue';
const modal = await modalController.create({
component: defineAsyncComponent(() => import('./some-component.vue'))
});
```

When this modal is created, it will have this markup:
```

```

Instead, it should have this markup:
```

```