Compatibility issue with Vuetify (slides shift right, unexpected margin?)

[lejungdu]

Describe the bug
Using Hooper with Vuetify, will produce undesirable compatibility, margin on left of each slide.

Git repo created to show problem (URL below)
https://github.com/lejungdu/vuetify-hooper-problem

To Reproduce
Steps to reproduce the behavior:

1. Install vue

vue create project-name

2. Install vuetify

vue add vuetify

3. Install hooper

npm install hooper

4. Start using hooper

<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
  </hooper>
</template>

<script>
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';

export default {
  name: 'App',
  components: {
    Hooper,
    Slide
  }
};
</script>

<style scoped>
  .hooper-slide {
    background-color: #62caaa;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: 2px solid #fff;
    font-size: 30px;
    border-radius: 10px;
  }
</style>

Expected behavior
The slides are not supposed to be shifted right, but they do shift right when vuetify is installed.

Screenshots

Desktop (please complete the following information):

• OS: macOS Catalina Version 10.15.7
• Browser: chrome
• Version [e.g. 0.0.x]

Additional context
Any help is appreciated, thanks.