Common tile layer settings for multiple vue2-leaflet maps

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 || '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> 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 || '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> 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>?