Common tile layer settings for multiple vue2-leaflet maps - leaflet

Question

In my Vue (2.x) application, I have a number of places where I use vue2-leaflet maps.
There are a few common features of these maps, but they are otherwise completely different, so it doesn't make sense to have all of them use a single component that contains an <l-map> (and all other relevant map components).
In order to reduce copying an pasting, I have created a few mixins with common features. For example, I have written a mixin for any maps that need to be able to auto-fit to their contents, so the only thing I need to do in each component that uses it is add :bounds="autofitBounds" to the <l-map> component.
I wanted to do create something similar for the <l-tile-layer> component, because all of our maps use the same layers.
I created a mixin that provides the url and attribution for the tile layer like this:
export default {
data () {
return {
url: process.env.VUE_APP_MAP_TILE_URL || 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: process.env.VUE_APP_MAP_TILE_COPYRIGHT || '© OpenStreetMap contributors',
};
},
};
I can use it by adding the mixin to my component and then adding the <l-tile-layer> component inside the <l-map> like this:
<l-tile-layer :url="url" :attribution="attribution" />
I wanted to see if there was a way to reduce the boilerplate further.
First, I tried to create it as a component instead, like this:
<template>
<l-tile-layer :url="url" :attribution="attribution" />
</template>
<script>
import { LTileLayer } from 'vue2-leaflet';
export default {
name: 'MyTileLayer',
components: {
LTileLayer,
},
data () {
return {
url: process.env.VUE_APP_MAP_TILE_URL || 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: process.env.VUE_APP_MAP_TILE_COPYRIGHT || '© OpenStreetMap contributors',
};
},
};
</script>
Then I can use that component inside my <l-map> without needing to add any attributes to it, like this:
<my-tile-layer>
The problem is that this doesn't render properly. Here are two screenshots - the <l-tile-layer> used directly on the left, and the <my-tile-layer> wrapper on the right.
Is there a better way to create a tile layer component with default values? Or is there a way I can fix the rendering of <my-tile-layer>?