<template>
  <div>
    <h2>Welcome to My Component</h2>
    <p>This is a reusable component.</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

<style>
div {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px 0;
}
</style>

<template>
  <div id="app">
    <h1>Main App</h1>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

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

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: 'This is a default description.'
    }
  }
};
</script>

<style>
div {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px 0;
}
</style>

<template>
  <div id="app">
    <h1>Main App</h1>
    <MyComponent title="Hello Vue!" description="This is a reusable component with Props." />
    <MyComponent title="Another Component" />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

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