Используя областью в Vue делает СКС не имеют никакого эффекта

Как я уже сказал в своем комментарии, когда компонент имеет значение scoped, любые стили применяются только к элементам внутри этого компонента, вы не можете стилизовать тег body.

Один из обходных путей состоит в том, чтобы установить его фон в крючке created и удалить его в крючке beforeDestroy:

<template>
  <div class="container-fluid">
    <form @submit.prevent="userLogin" class="login-form">
      <h3>Sign In</h3>

      <div>
        <label>Email address</label>
        <input type="email" v-model="user.email" />
      </div>

      <div>
        <label>Password</label>
        <input type="password" v-model="user.password" />
      </div>

      <button type="submit">Sign In</button>
    </form>
     <md-card class="login-card">
      <md-card-content>
         <p class="options-txt">Options</p>
          <p class="options-num">1,000</p>
      </md-card-content>
    </md-card>
  </div>
</template>

<script>
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import store from '../store/store'
export default {
  name: "Login",
  data() {
    return {
      user: {
        email: "",
        password: "",
      },
    };
  },
  methods: {
    async userLogin() {
        try {
            await firebase.default.auth().signInWithEmailAndPassword(this.user.email, this.user.password);
            let userId = firebase.auth().currentUser.uid;
            const starCountRef = firebase.database().ref(userId);
            starCountRef.on('value', function(snapshot) {
               store.commit('saveApiKey', snapshot.val().apiKey)
            });
            this.$router.push('/home')
        } catch (error) {
            alert(error.message);
        }
    }
  },
  created() {
    document.body.style.background = 'linear-gradient(to bottom, green 50%, gray 50%)';
  },
  beforeDestroy() {
    document.body.style.background = 'whatever color it was originally';
  }
}
</script>

<style lang="scss" scoped>
@import "../../variables";

.login-card {
  display: flex;
  flex-direction: column;
  width: 480px;
  margin: 0 auto;
  margin-top: 100px;
  vertical-align: middle;
  border-radius: 12px; 
}
</style>

Однако вы не сможете использовать свои переменные SCSS таким образом.

Если вы хотите стилизовать свое тело для всех страниц вашего приложения, вы можете добавить CSS-файл и вызвать его непосредственно в вашем /public/index.html

Это не лучшая практика, но я прекрасно работаю ;)