vue js scoped slots styles error with vue styled components

I tried using vue-styled-compoenents to style a simple button with some text inside but the styles dont work and I get a scopedSlots issue in the parent component.

This is the code for the button and the text components in component.js

import styled from 'vue-styled-components';

export const sLabel = styled.label`

  color: #000;
`;

export const sButton = styled.div`

  height: 1rem;
  width: 2rem;
  background-color: #000;

  ${sLabel} {
    color: #fff;
  }
`;

This is my code in my page.

<template>

  <sButton>
    <sLabel>Button</sLabel>
  </sButton>

</template>

<script>

import { sButton, sLabel } from './component.js'

export default {
  components: {
    sButton,
    sLabel
  }
}

</script>

This is the result I get under the sButton styles and nothing under sLabel

), scopedSlots: this.$scopedSlots

But Instead if I just use this code it works.

export const sButton = styled.div`

  height: 1rem;
  width: 2rem;
  background-color: #000;

  label {
    color: #fff;
  }
`;

The styles are applied to the parent component if I declare the parent component before the child even if the styles are under the child.

export const sButton = styled.div`

  height: 1rem;
  width: 2rem;
  background-color: #000;

  ${sLabel} {
    color: #fff;
  }
`;

export const sLabel = styled.label`

  color: #000;
`;

Can someone tell me where my code is incorrect and what is causing these issues ?