Jetpack Compose View Models not updating view - android-jetpack-compose

Question

I've created a view model in Jetpack Compose, but the view doesn't refresh when a variable updates inside it.
I've followed the view model guide here: https://developer.android.com/jetpack/compose/libraries#viewmodel
In the SignInWithGoogleView and SignInWithEmailAddressView, the signInOrSignUpMethod variable updates when I click on the ClickableText, but the SignInOrSignUpView doesn't update.
What am I missing?
enum class SignInOrSignUpMethod {
Google,
EmailOnly
}
class SignInOrSignUpViewModel: ViewModel() {
var signInOrSignUpMethod: SignInOrSignUpMethod = SignInOrSignUpMethod.Google
}
//SignInOrSignUpView
#Composable
fun SignInOrSignUpView(signInOrSignUpViewModel: SignInOrSignUpViewModel = viewModel()) {
Box {
//Background image
Image(
painter = painterResource(id = R.drawable.sign_in_sign_up_background),
contentDescription = null,
contentScale = ContentScale.FillBounds,
alpha = 0.35F,
modifier = Modifier
.background(Color.White)
)
Column(
modifier = Modifier
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
//App Logo
Image(
painter = painterResource(id = R.drawable.app_logo),
contentDescription = null,
colorFilter = ColorFilter.tint(
(if (isSystemInDarkTheme()) {
Color.White
} else {
Color.Black
})
),
modifier = Modifier
.size(125.dp, 125.dp)
.offset(0.dp, 50.dp)
)
Spacer(modifier = Modifier.height(150.dp))
//Sign In Text
Text(
text = "Sign In",
style = androidx.compose.ui.text.TextStyle(
fontSize = 30.sp,
fontWeight = FontWeight.Bold
)
)
Spacer(modifier = Modifier.weight(1f))
//Sign In Buttons
if (signInOrSignUpViewModel.signInOrSignUpMethod == SignInOrSignUpMethod.Google) {
SignInWithGoogleView()
} else if (signInOrSignUpViewModel.signInOrSignUpMethod == SignInOrSignUpMethod.EmailOnly) {
SignInWithEmailAddressView()
}
}
}
}
#Composable
fun SignInWithGoogleView(signInOrSignUpViewModel: SignInOrSignUpViewModel = viewModel()) {
Text(
text = "Google Sign In",
style = androidx.compose.ui.text.TextStyle(
fontSize = 30.sp,
)
)
ClickableText(
text = AnnotatedString("Continue with email address"),
onClick = {
Log.d("Print", signInOrSignUpViewModel.signInOrSignUpMethod.toString())
signInOrSignUpViewModel.signInOrSignUpMethod = SignInOrSignUpMethod.EmailOnly
}
)
}
#Composable
fun SignInWithEmailAddressView(signInOrSignUpViewModel: SignInOrSignUpViewModel = viewModel()) {
Text(
text = "Email Sign In",
style = androidx.compose.ui.text.TextStyle(
fontSize = 30.sp,
)
)
ClickableText(
text = AnnotatedString("Continue with Google"),
onClick = {
signInOrSignUpViewModel.signInOrSignUpMethod = SignInOrSignUpMethod.Google
}
)
}

Answer 1

This bit I was missing was in my ViewModel to declare mutableStateOf:
class SignInOrSignUpViewModel: ViewModel() {
var signInOrSignUpMethod: SignInOrSignUpMethod by mutableStateOf(SignInOrSignUpMethod.Google)
}