Vue Js Copyright Year in Footer

<html>

</head>

<body>
    <div id="app">
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="footer-section">
                            <h4>About Us</h4>
                            <p>We're a team of developers creating awesome apps for our users.</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="footer-section">
                            <h4>Contact Us</h4>
                            <ul class="list-unstyled">
                                <li><span class="footer-icon"><i class="fa fa-envelope"></i></span>
                                    info@myawesomeapp.com</li>
                                <li><span class="footer-icon"><i class="fa fa-phone"></i></span> 555-1234</li>
                                <li><span class="footer-icon"><i class="fa fa-twitter"></i></span> <a
                                        href="#">@myawesomeapp</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="footer-section">
                            <h4>Quick Links</h4>
                            <ul class="list-unstyled">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Features</a></li>
                                <li><a href="#">Pricing</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>&copy; {{ currentYear }} My Awesome App</p>
                        </div>
                        <div class="col-sm-6">
                            <ul class="list-unstyled footer-links">
                                <li><a href="#">Privacy Policy</a></li>
                                <li><a href="#">Terms of Use</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            name: 'Footer',
            data() {
                return {
                    currentYear: new Date().getFullYear(),
                };
            },

});
    </script>
    <style>
        .footer {
            background-color: #f8f8f8;
            color: #333;
            padding: 60px 0;
            font-size: 16px;
        }

.footer-section {
            margin-bottom: 30px;
        }

.footer-section h4 {
            margin-bottom: 20px;
        }

.footer-section p {
            margin-bottom: 0;
        }

.list-unstyled {
            margin-bottom: 0;
        }

.footer-icon {
            margin-right: 10px;
        }

.footer-bottom {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
        }

.footer-bottom p {
            margin-bottom: 0;
        }

.footer-links {
            text-align: right;
        }

.footer-links li {
            display: inline-block;
            margin-left: 10px;
        }

.footer-links a {
            color: #fff;
            text-decoration: none;
        }

@media only screen and (max-width: 767px) {
            .footer {
                font-size: 14px;
                padding: 40px 0;
            }

.footer-section {
                text-align: center;
                margin-bottom: 40px;
            }

.footer-section h4 {
                margin-bottom: 20px;
            }
        }
    </style>

</body>

</html>